如何在jQuery自动完成中显示多个值?

时间:2016-12-29 15:39:27

标签: javascript jquery html jquery-ui autocomplete

我正在尝试设计一个多列选择/搜索框,如下所示。

enter image description here

我考虑过使用jQuery-UI自动完成小部件。我将使列表显示为焦点,以便用户可以直接从列表中选择或开始在搜索框中键入以过滤显示的数据。

我知道我可以将自动填充对象数组作为源,并在用户选择行时决定将标签显示为所选项目。

我想要的是在列表中显示两列以上。知道怎么做到这一点?

感谢,

2 个答案:

答案 0 :(得分:0)

使用autocomplete renderItem自定义搜索结果。对于多列视图,在渲染中使用html代码来呈现像视图一样的表。然后使用this库在自动完成UI中呈现html。

答案 1 :(得分:0)

我最终使用了来自Twitter的typeahead.js

与Bloodhound引擎配对,它可以为列表指定服装模板。