带有“组合框"的jQuery令牌输入；功能? [英] jQuery Tokeninput with "Combobox" functionality?

问题描述

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

I'm using Loopj Tokeninput plugin and I would like to know if anyone has implemented the jQuery "combobox" functionality in it? or something similar? The scope is to allow for displaying all the data from a local source by clicking an "arrow down" or just by clicking in the input field just like a dropdown menu (but allowing to narrow it down when typing something...). If so, could anyone share how to implement it?

推荐答案

嘿，在tokeninput插件中没有预定义的方法可以执行此操作.但是，我们可以更改插件本身来实现所需的功能. 我对插件做了一些改动.在您的jquery.tokenput.js文件中进行相同的更改，看看它是否有效.打开js文件.搜索

Hey there is no method predefined to do that in tokeninput plugin.. However we can alter the plugin itself to achieve what you need. I did some alter to plugin .Do the same change in your jquery.tokenput.js file and see if it works. Open the js file.Search for

var input_box

var input_box

现在转到它的.focus(function(){})部分，并用它替换.

Now goto .focus(function(){}) part of it and and replace it with this.

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

搜索函数run_search(查询). 如果该功能的一部分转到其他位置，然后将其替换为下面的一个.

Search for function run_search(query). go to else if part of the function and replace it with below one.

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来在框处于焦点且查询为空时返回整个列表.如果查询不为空，则它将搜索该查询.

We are using onfocus of that input box to return the whole list when the box is in focus and query is empty.if query is not empty then it will search for that query.

此外，如果要在搜索结果框中显示滚动条，则应修改token-input.css文件中"div.token-input-dropdown"的css，如下所示: -消除或评论:溢出:隐藏；" -添加:最大高度:150像素；" (或您希望盒子具有的最大高度) -添加:溢出:自动；"

Additionally, if you wants to show a scrollbar in the search results box, you should modify the css of "div.token-input-dropdown" in the token-input.css file as follows: - Eliminate or Comment: "overflow: hidden;" - Add: "max-height: 150px;" (or whatever max height you want the box to have) - Add: "overflow: auto;"

这篇关于带有“组合框"的jQuery令牌输入；功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！