JqueryUI 自动完成输入字段

Posted 2023-05-08

【中文标题】JqueryUI 自动完成输入字段

【英文标题】：JqueryUI autocomplete input field

【发布时间】：2015-03-28 14:45:26

【问题描述】：

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

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

有什么想法吗？

【参考方案1】：

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

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

(JSFiddle)

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

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

【讨论】：

如果您在新的 HTML5 输入数字类型上使用 jQuery UI 的自动完成功能并且您只想要 ID 但仍想保留自动完成的文本标签，则将 return false 添加到末尾很有用。