带有“组合框"的 jQuery Tokeninput功能? [英] jQuery Tokeninput with "Combobox" functionality?

问题描述

我正在使用 Loopj Tokeninput 插件，我想知道是否有人实现了 <一个 href="http://jqueryui.com/demos/autocomplete/#combobox" rel="nofollow">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 输入框

现在转到 .focus(function(){}) 的一部分并将其替换为 this.

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(query).如果是函数的一部分，则转到 else 并将其替换为以下函数.

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

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 Tokeninput功能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！