jqueryUI 自动完成带有额外数据？

Question

使用jQueryUI Autocomplete

我想将一些其他数据附加到框中的结果列表中。例如，我的数据集可能如下所示:

[
    {
        "name": "John's wild bacon emporium",
        "code": "BACON"
    },
    {
        "name": "Jill and Jack's well",
        "code": "WELL"
    },
    {
        "name": "Herp and derp",
        "code": "HD"
    }
]

但是 jQueryUI 文档说它需要一个平面字符串数组。

用户将按名称搜索，而不是代码(让我们假设)。更重要的是，我希望能够在查看 select: function(event, ui) {/*...*/} 时访问该代码，无论是通过 data-xxx，或其他一些巫毒。我想避免使用第二个列表来将字符串与标签内容进行匹配(假设我们可以以某种方式有重复的名称，并且用户永远不会感到困惑)，我只想将代码数据粘贴到名称标签上。

这样的问题是asked in 2008 ，但从那时起，该插件就不再具有 .result() 了。

Answer 1

But the jQueryUI docs say it wants a flat array of strings.

Actually :

The local data can be a simple Array of Strings, or it contains Objects for each item in the array, with either a label or value property or both.

因此，只要您的数据至少为数组中的每个对象提供一个value属性，小部件就可以处理它:

[
    {
        "name": "John's wild bacon emporium",
        "code": "BACON",
        "value": "Bacon",
    },
    {
        "name": "Jill and Jack's well",
        "code": "WELL"
        "value": "Well"
    },
    {
        "name": "Herp and derp",
        "code": "HD",
        "value": "Herp"
    }
]

用户的查询将与每个对象的 value 属性进行匹配(请注意，标签不是必需的；仅当您希望在自动完成选项列表中显示与 值)。

您可以在 select 事件处理程序中访问有关该项目的额外数据:

select: function(event, ui) {
    alert(ui.item.code); // Access the item's "code" property.
}

希望有帮助。这是一个简单的例子:http://jsfiddle.net/vR3QH/ 。我删除了 name 属性，只使用 value 属性。每次选择某个项目时，input 元素都会使用属于所选项目的属性值进行更新。