Question

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

Answer 1

Chosen正是您所需要的。

Chosen是一个JavaScript插件，可以制作长而笨重的选择框更加用户友好。它目前在jQuery和原型口味。

Answer 2

嘿，在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，如下所示： - 消除或评论：“溢出：隐藏;” - 添加：“max-height：150px;” （或者你希望盒子有的最大高度） - 添加：“溢出：自动;”

带有“Combobox”功能的jQuery Tokeninput？

2 个答案: