带有“Combobox”function的jQuery Tokeninput？

我正在使用Loopj Tokeninput插件 ，我想知道是否有人在其中实现了jQuery“combobox”function ？ 或类似的东西？ 范围是允许通过单击“向下箭头”或仅通过单击输入字段来显示来自本地源的所有数据，就像下拉菜单一样（但允许在输入内容时缩小范围……）。 如果是这样，有人可以分享如何实施它吗？

Answer 1

嘿，没有预定义的方法在tokeninput插件中做到这一点。但是我们可以改变插件本身来实现你所需要的。 我做了一些改变插件。在你的jquery.tokenput.js文件中进行相同的更改，看看它是否有效。 打开js文件。搜索

var input_box

现在转到.focus（function（）{}）的一部分，并用它替换它。

if (settings.tokenLimit === null || settings.tokenLimit !== token_count) { if (settings.local_data) { setTimeout(function() { run_search(''); }, 5); } else { show_dropdown_hint(); } 

搜索函数run_search（查询） 。 如果是函数的一部分则转到else，并将其替换为下面的函数。

 else if (settings.local_data) { // Do the search through local data var results ; if(query==''){ results= settings.local_data; } else{ results= $.grep(settings.local_data, function(row) { return (row[settings.propertyToSearch].toLowerCase().indexOf(query.toLowerCase()) == 0 || row[settings.propertyToSearch].toLowerCase().indexOf(' ' + query.toLowerCase()) > -1); }); } 

当框处于焦点并且查询为空时，我们使用该输入框的onfocus返回整个列表。如果查询不为空，则它将搜索该查询。

此外，如果要在搜索结果框中显示滚动条，则应修改token-input.css文件中的“div.token-input-dropdown”的css，如下所示： – 消除或注释：“overflow：hidden ;” – 添加：“max-height：150px;” （或者你希望盒子有的最大高度） – 添加：“overflow：auto;”

Answer 2

Chosen正是您所需要的。

Chosen是一个JavaScript插件，它使长而笨重的选择框更加用户友好。 它目前有jQuery和Prototype两种版本。