【问题标题】:jQuery Tokeninput with "Combobox" functionality?具有“组合框”功能的 jQuery Tokeninput?
【发布时间】:2012-08-19 16:56:31
【问题描述】:

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

【问题讨论】:

    标签: jquery jquery-plugins jquery-tokeninput


    【解决方案1】:

    Chosen 正是您所需要的。

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

    【讨论】:

    • 谢谢@joao。我不知道 Chosen 插件。它看起来很棒,绝对可以满足我的需求。我可能最终会使用它。但是,我想看看是否可以轻松地为此目的使用 Tokeninput 插件,因为我已经在我的表单中将它用于需要 ajax 调用的自动完成输入(并且我想防止使用另一个具有自己的 css 的插件自定义)。
    • 谢谢乔奥·席尔瓦。在阅读您的答案之前,我不知道此控件。
    【解决方案2】:

    嘿,在 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如下: - 消除或评论:“溢出:隐藏;” - 添加:“最大高度:150px;” (或您希望盒子具有的任何最大高度) - 添加:“溢出:自动;”

    【讨论】:

    • 谢谢@ashirvad-singh!这似乎有效!我刚刚修改了您的答案,以允许在使用 Ajax 加载结果时允许默认插件行为,并修改 css 以允许滚动条显示在搜索结果框中(以限制框的高度)。只要您清楚我的编辑,我就会接受答案。
    • 太好了 :) 谢谢,继续 :)
    • @Ashirvad :嘿,您的代码运行良好。我担心的两件事是 i) 向上和向下箭头不适用于下拉菜单。 ii)当我们因为添加了代码而单击框时,所有结果都会显示出来。这两个应该怎么办。
    猜你喜欢
    • 1970-01-01
    • 2012-05-03
    • 2013-11-26
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-10-07
    • 1970-01-01
    相关资源
    最近更新 更多