jqueryUI自动完成与额外的数据？

Question

使用jQueryUI自动完成

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

[
    {
        "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还是其他一些伏都教.我想避免使用第二个列表来匹配标签内容的字符串(假设我们可以以某种方式重复名称,用户永远不会感到困惑),我只想将代码数据粘贴到名称标签上.

这样的问题在2008年被问到,但从那以后插件就不再存在.result()了.

Answer 1

但是jQueryUI文档说它需要一个扁平的字符串数组.

实际上:

本地数据可以是一个简单 的字符串数组,也可以包含数组中每个项目的对象,带有 标签或值属性或两者.

因此,只要您的数据至少具有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每个对象的属性进行匹配(请注意,标签不是必需的;如果要在自动完成选项列表中显示不同的内容,则仅指定它value).

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

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

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