Javascript 如何正确实现使用jQueryUIAutoComplete小部件的表单？

我正在使用RubyonRails3.2.2和（包括jQueryUI）。我正在尝试实现一个HTML表单，以便使用jQueryUI小部件搜索、选择和提交城市数据

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

城市：
$jQ（函数（）{
var cache={}；
$jQ（“#城市”）.autocomplete({
自动对焦：对，
最小长度：3，
来源：功能（请求、响应）{
$jQ.ajax({
url:“”，
数据：{search:request.term}，
数据类型：“json”，
成功：功能（数据）{
var cities=新数组（）；
$jQ.每个（数据、功能（阵列ID、城市）{
push（{label:city.name，value:city.id}）
});
答复（城市）；
},
错误：函数（）{
答复（[]）；
}
});
}
});
});

上面的代码与检索JSON数据和显示检索到的城市列表的预期一样有效。如您所见，城市数据的“有用部分”是城市的

id

，因为我使用

id

值在内部处理提交的数据。但是，如果显示了“可选”城市列表，当我使用键盘上下箭头选择其中一个城市时，输入字段将填充城市

id

（而不是城市

名称

）

我想：

• 选择城市时，在输入字段中显示城市

  name

  ，而不是

  id

• 找到一种提交城市

  id

  而不是城市

  name

  的方法（即使城市

  name

  是前端内容中显示的唯一内容）

---

我应该怎样做才能正确地完成这一点？

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

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

---

演示：

这还不是很清楚，但听起来好像你想要自动完成的默认功能。@Kevin B-我不这么认为，因为，例如，与自动完成小部件事件相关的默认功能“是用所选项目的值替换文本字段的值”。在这种情况下，正如我在问题中所写的那样，我想在选择城市的输入字段中显示城市

名称
（
标签
），而不是
id
（
值
）。在这个提琴上，键入
f
，然后选择foo，然后在输入中显示
条
@凯文B-你的链接代码不是我要找的。但是，考虑到您的情况，我仍然希望显示
foo
标签（在选择
foo
时），但在提交相关表单时提交
条形图
值。在选择时，使用所需的值填充隐藏输入，并提交该隐藏输入，而不是自动完成。今天的语法highlighter怎么样了？您的代码似乎正常工作，但“今天的语法highlighter怎么样了”是什么意思？由于某种原因，它会错误地突出显示代码，即使代码在语法上是有效的。与问题无关。在选择值时存在一个微妙的（可见的）问题：当您在自动完成字段中使用上/下键盘箭头时，它将显示所选项目的
值
，直到我没有最终选择该项目为止。应始终显示
标签
（而不是
值
）。问题是，最终用户不应该看到
值
。很抱歉，当您说“出于某种原因，它不正确地突出显示了代码，即使代码在语法上是有效的”时，我仍然不理解您指的是什么。
<div class="ui-widget">
  <label for="cities">City: </label>
  <input id="cities" />
  <input name="cities" type="hidden" id="cities-hidden" />
</div>

$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
    }
  });
});