1

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

4

2 回答 2

8

Chosen正是您所需要的。

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

于 2012-08-19T17:02:25.743 回答
3

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

var 输入框

现在转到 .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(query)。如果是函数的一部分，请转到 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如下： - Eliminate or Comment: “overflow: hidden ;" - 添加：“最大高度：150px；” （或您希望框具有的任何最大高度） - 添加：“溢出：自动；”

于 2012-08-19T20:00:20.320 回答