如何正确实现使用 jQuery UI 自动完成小部件的表单？

Question

我正在使用 Ruby on Rails 3.2.2 和 jquery-rails 2.1.3（包括 jQuery UI）。我正在尝试实现一个 HTML 表单，以便使用 Autocomplete jQuery UI 小部件搜索、选择和提交城市数据。

此时我正在使用以下“自动完成”字段来实现我的表单：

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
</div>

<script>
  $jQ(function() {
    var cache = {};
    $jQ( "#cities" ).autocomplete({
      autoFocus: true,
      minLength: 3,
      source:    function( request, response ) {
        $jQ.ajax({
            url:      '<SEARCH_PATH>',
            data:     { search: request.term },
            dataType: 'json',
            success:  function(data) {
              var cities = new Array();

              $jQ.each(data, function(arrayID, city) {
                cities.push({ label: city.name, value: city.id })
              });

              response( cities ); 
            },
            error:    function () {
              response([]);
            }
        });
      }
    });
  });
</script>

上述代码按预期工作，用于检索 JSON 数据并显示检索到的城市列表。如您所见，城市数据的“有用部分”是城市的id，因为我使用id 值来在内部处理提交的数据。但是，鉴于显示了“可选”城市列表，当我使用键盘向上和向下箭头来选择其中一个城市时，输入字段将填充城市id（而不是城市name） .

我想：

• 在选择城市的输入字段中显示城市name 而不是id；
• 想办法提交城市id而不是城市name（即使城市name是前端内容中唯一显示的东西）。

我应该如何/应该如何正确地做到这一点？

Answer 1

使用 select 事件填充隐藏字段，然后提交隐藏字段。

<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
  <input name="cities" type="hidden" id="cities-hidden" />
</div>

js

$jQ(function() {
  var cache = {};
  $jQ( "#cities" ).autocomplete({
    autoFocus: true,
    ...
    select: function(e, ui) {
      $("#cities-hidden").val(ui.item.value); // populate hidden input
      $("#cities").val(ui.item.label); // populate autocomplete input
      return false; // prevent default action of populating autocomplete input with value
    }
  });
});

演示：http://jsfiddle.net/f8yPX/3/