Автозаполнение jQuery - нужно инициировать только при вводе специального символа

Я уверен, что вы, ребята, видели этот отличный плагин:

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

Я проверил его и не смог найти вариант запуска плагина автозаполнения только при вводе определенного символа. В этом случае мне нужно, чтобы это был знак «@».

Я вижу, что у него есть возможность установить минимальное количество символов: minChars: число (по умолчанию 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 = $

Спасибо!


plugins jquery autocomplete autosuggest
person Mitch Moccia    schedule 18.01.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Я никогда раньше не использовал этот элемент управления, но, похоже, вы захотите заглянуть в файл 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
                }
person Dutchie432    schedule 18.01.2011
comment
Большое спасибо за ответ... Этот код, кажется, вообще не инициирует раскрывающийся список.... Мне просто нужно, чтобы он активировался при вводе знака at. т. е. когда кто-то набирает @, он будет находиться в состоянии «включено» и начнет автоподсказку, когда он наберет больше текста после @. Любые другие идеи? - person Mitch Moccia; 18.01.2011
comment
Это должно быть case:64 Я считаю... Поэтому, когда я добавляю это, он не активируется, потому что пытается найти, доступен ли знак @ в данных, которого никогда не будет.... Когда я добавляю case:32 для пробела, он успешно активируется, потому что он действительно находит пробелы в данных... Мне просто нужно, чтобы он активировался при вводе знака @. Спасибо - person Mitch Moccia; 18.01.2011
comment
На самом деле это случай: 50 ... так что теперь это работает ... Проблема в том, что он ищет знак @ в данных ... Мне просто нужно найти строку после знака at. Спасибо за любую дополнительную помощь - person Mitch Moccia; 18.01.2011
comment
@mm-93 нашел решение по поиску строки после знака @? - person imin; 24.12.2012

arrow_upward
1
arrow_downward

Я думаю, вы можете поиграть с beforeRetrieve:

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

Из документа:

beforeRetrieve: функция обратного вызова — пользовательская функция, которая запускается непосредственно перед выполнением запроса AJAX или перед поиском локального объекта. Это используется для изменения строки поиска перед ее обработкой. Таким образом, если пользователь ввел «jim» в поле AutoSuggest, вы можете вызвать эту функцию, чтобы добавить к своему запросу «guy_». Делаем последний запрос = "guy_jim". В эту функцию передается поисковый запрос. Пример: beforeRetrieve: function(string){ return string; }

person Francesco Laurita    schedule 18.01.2011
comment
Спасибо за ответ ... Однако это привело к странному поведению, которое выделяло все пробелы между символами в раскрывающемся списке. - person Mitch Moccia; 18.01.2011