javascript - 将元数据添加到 jQuery UI 自动完成

Question

我正在编写一个在“发送”字段中使用 jQuery UI 自动完成功能的消息传递应用程序。我一切正常，但我需要将一些元数据(如用户 ID)附加到项目。

选中该项目后，我计划添加一个带有用户 ID 的隐藏输入，如下所示:<input type="hidden" name="to[]" value="4" />为每个选定的用户添加一个。然后当提交表单时，这些数据将被发送到一个 php 脚本，我可以在其中向每个用户发送消息。

我只是想知道这样的事情是否可行，如果不可能，最好的解决方法是什么？或者，有没有比我想的更好的方法？

谢谢，

Answer 1

你走在正确的轨道上!

自动完成小部件是为处理这种情况而构建的。只要您的 source 中的项目具有 value 属性(以及可选的 label 属性)，小部件就会正确呈现选项。

所以你有两个选择。您可以提供 label 和 value 属性，并在 上使用 value 属性创建隐藏的 input 元素>select 事件，或者使用你自己的属性。举个例子更容易理解:

var users = [
    { label: 'Jon', value: 1 },
    { label: 'Jeff', value: 2 },
    { label: 'Marc', value: 3 },
    { label: 'Josh', value: 4 },
    { label: 'Andrew', value: 5}
];

$("#autocomplete").autocomplete({
    source: users,
    select: function(event, ui) {
        $("body").append("<input type='text' value='" + ui.item.value + "'/>");
    }
});

这是一个工作示例:http://jsfiddle.net/EYQLV/1/

如果源中的每个项目都包含该属性，您可以轻松地使用 ui.item.id。