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事件中的input元素值，该事件在HTML中有效，但提交数据并未反映更改，这使我认为窗口小部件正在包装输入字段并存储其他地方的数据。此外，从自动更正下拉列表中选择一个值不会更改输入元素的值。

有什么想法吗？

Answer 1

将return false添加到select函数时似乎有效。取消默认值，正如手动提到的那样，默认值是将文本字段的值替换为所选项目的值。

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

（JSFiddle）

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

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

JqueryUI自动完成输入字段

1 个答案: