jQuery自动完成 - 只有在输入特殊字符时才需要启动

时间:2011-01-18 19:08:45

标签: jquery plugins autocomplete autosuggest

我相信你们已经看过这个出色的插件了:

http://code.drewwilson.com/entry/autosuggest-jquery-plugin

我检查了一下,但只有在键入特定字符时才能找到启动autosuggest插件的选项。在这种情况下,我需要它是at符号'@'。

我看到它可以选择设置最小字符数: minChars:number(默认为1)

但是,在输入@符号之前,我需要下拉列表才能显示。

仅供参考,以下是jquery.autoSuggest.js中的选项

        var defaults = { 
        asHtmlID: false,
        startText: "Enter Name Here",
        emptyText: "No Results Found",
        preFill: {},
        limitText: "No More Selections Are Allowed",
        selectedItemProp: "value", //name of object property
        selectedValuesProp: "value", //name of object property
        searchObjProps: "value", //comma separated list of object property names
        queryParam: "q",
        retrieveLimit: false, //number for 'limit' param on ajax request
        extraParams: "",
        matchCase: false,
        minChars: 1,
        keyDelay: 400,
        resultsHighlight: true,
        neverSubmit: false,
        selectionLimit: false,
        showResultList: true,
        start: function(){},
        selectionClick: function(elem){},
        selectionAdded: function(elem){},
        selectionRemoved: function(elem){ elem.remove(); },
        formatList: false, //callback function
        beforeRetrieve: function(string){ return string; },
        retrieveComplete: function(data){ return data; },
        resultClick: function(data){},
        resultsComplete: function(){}
    };  
    var opts = $

谢谢!

2 个答案:

答案 0 :(得分:1)

我认为你可以玩beforeRetrieve

beforeRetrieve: function(string){
 if (string.indexOf('@') == -1) return "";
 return string;
}

来自doc:

beforeRetrieve:回调函数 - 在发出AJAX请求之前或搜索本地对象之前运行的自定义函数。这用于在处理之前修改搜索字符串。因此,如果用户在“AutoSuggest”框中输入“jim”,则可以调用此函数将其查询前置为“guy_”。制作最终查询=“guy_jim”。搜索查询将传递到此函数中。示例:beforeRetrieve:function(string){return string; }

答案 1 :(得分:0)

之前我从未使用过这个控件,但看起来你想要查看jquery.autoSuggest.js文件(非缩小版)。查看此案例陈述。我认为您需要将default:案例更改为case x:,其中x是您要用来触发自动填充的键的ascii代码。

                switch(e.keyCode) {
                    case 38: // up
                        e.preventDefault();
                        moveSelection("up");
                        break;
                    case 40: // down
                        e.preventDefault();
                        moveSelection("down");
                        break;
                    case 8:  // delete
                        if(input.val() == ""){                          
                            var last = values_input.val().split(",");
                            last = last[last.length - 2];
                            selections_holder.children().not(org_li.prev()).removeClass("selected");
                            if(org_li.prev().hasClass("selected")){
                                values_input.val(values_input.val().replace(","+last+",",","));
                                opts.selectionRemoved.call(this, org_li.prev());
                            } else {
                                opts.selectionClick.call(this, org_li.prev());
                                org_li.prev().addClass("selected");     
                            }
                        }
                        if(input.val().length == 1){
                            results_holder.hide();
                             prev = "";
                        }
                        if($(":visible",results_holder).length > 0){
                            if (timeout){ clearTimeout(timeout); }
                            timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
                        }
                        break;
                    case 9: case 188:  // tab or comma
                        tab_press = true;
                        var i_input = input.val().replace(/(,)/g, "");
                        if(i_input != "" && values_input.val().search(","+i_input+",") < 0 && i_input.length >= opts.minChars){ 
                            e.preventDefault();
                            var n_data = {};
                            n_data[opts.selectedItemProp] = i_input;
                            n_data[opts.selectedValuesProp] = i_input;                                                                              
                            var lis = $("li", selections_holder).length;
                            add_selected_item(n_data, "00"+(lis+1));
                            input.val("");
                        }
                    case 13: // return
                        tab_press = false;
                        var active = $("li.active:first", results_holder);
                        if(active.length > 0){
                            active.click();
                            results_holder.hide();
                        }
                        if(opts.neverSubmit || active.length > 0){
                            e.preventDefault();
                        }
                        break;
                    default:
                        if(opts.showResultList){
                            if(opts.selectionLimit && $("li.as-selection-item", selections_holder).length >= opts.selectionLimit){
                                results_ul.html('<li class="as-message">'+opts.limitText+'</li>');
                                results_holder.show();
                            } else {
                                if (timeout){ clearTimeout(timeout); }
                                timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
                            }
                        }
                        break;
                }

可能更像这样

                switch(e.keyCode) {
                    case 38: // up
                        e.preventDefault();
                        moveSelection("up");
                        break;
                    case 40: // down
                        e.preventDefault();
                        moveSelection("down");
                        break;
                    case 8:  // delete
                        if(input.val() == ""){                          
                            var last = values_input.val().split(",");
                            last = last[last.length - 2];
                            selections_holder.children().not(org_li.prev()).removeClass("selected");
                            if(org_li.prev().hasClass("selected")){
                                values_input.val(values_input.val().replace(","+last+",",","));
                                opts.selectionRemoved.call(this, org_li.prev());
                            } else {
                                opts.selectionClick.call(this, org_li.prev());
                                org_li.prev().addClass("selected");     
                            }
                        }
                        if(input.val().length == 1){
                            results_holder.hide();
                             prev = "";
                        }
                        if($(":visible",results_holder).length > 0){
                            if (timeout){ clearTimeout(timeout); }
                            timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
                        }
                        break;
                    case 9: case 188:  // tab or comma
                        tab_press = true;
                        var i_input = input.val().replace(/(,)/g, "");
                        if(i_input != "" && values_input.val().search(","+i_input+",") < 0 && i_input.length >= opts.minChars){ 
                            e.preventDefault();
                            var n_data = {};
                            n_data[opts.selectedItemProp] = i_input;
                            n_data[opts.selectedValuesProp] = i_input;                                                                              
                            var lis = $("li", selections_holder).length;
                            add_selected_item(n_data, "00"+(lis+1));
                            input.val("");
                        }
                    case 13: // return
                        tab_press = false;
                        var active = $("li.active:first", results_holder);
                        if(active.length > 0){
                            active.click();
                            results_holder.hide();
                        }
                        if(opts.neverSubmit || active.length > 0){
                            e.preventDefault();
                        }
                        break;
                    case x:
                        if(opts.showResultList){
                            if(opts.selectionLimit && $("li.as-selection-item", selections_holder).length >= opts.selectionLimit){
                                results_ul.html('<li class="as-message">'+opts.limitText+'</li>');
                                results_holder.show();
                            } else {
                                if (timeout){ clearTimeout(timeout); }
                                timeout = setTimeout(function(){ keyChange(); }, opts.keyDelay);
                            }
                        }
                        break;
                    default:
                            //Do Nothing
                }