JqueryUI 自动完成输入字段

Question

当从下拉列表中选择自动完成选项时，我需要更改输入字段的值。问题是自动完成小部件的源由具有索引和标签的对象组成。将发送数据的表单必须采用索引但显示标签。

HTML：

<input id="input" name="field" type="text">

JS：

values = [
  {label: "aaaaaa", id: 1},
  {label: "aaabbb", id: 2},
  {label: "aaaccc", id: 3},
];

$("#input").autocomplete({
  source: values,
  select: function (event, ui){
    // change #input to ui.item.id
  }
});

(JSFiddle)

提交时表单应包含输入字段中的索引而不是标签。

我的第一个想法是在 select 事件中更改输入元素的值，该事件在 HTML 中有效，但提交数据并未反映更改，这让我认为小部件正在包装输入字段并将数据存储在其他地方。此外，从自动更正下拉列表中选择值不会更改输入元素的值。

有什么想法吗？

Answer 1

将return false 添加到选择函数时似乎可以工作。取消默认值，如手册所述，将文本字段的值替换为所选项目的值。

$("#input").autocomplete({
    source: values,
    select: function (event, ui){
        $("#input").val(ui.item.id);
        return false;
    }
});

(JSFiddle)

这样，您可以在发送 id 的表单中拥有一个隐藏字段，同时仍显示标题（值）。

一个稍微不寻常的 RTFM 案例。