jQuery autocomplete - need to initiate only when a special character is typed

I'm sure you guys have seen this excellent plugin:

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

I checked it out and could not find an option to initiate the autosuggest plugin only when a specific character is typed. In this case I need it to be the at sign '@'.

I see it has the option to set a minimum number of characters: minChars: number (1 by default)

However, I need for the dropdown to NOT show until the @ sign is typed.

FYI, here are the options in 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 a开发者_C百科jax 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 = $

Thanks!

I think you can play with beforeRetrieve:

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

From the doc:

beforeRetrieve: callback function - Custom function that is run right before the AJAX request is made, or before the local objected is searched. This is used to modify the search string before it is processed. So if a user entered "jim" into the AutoSuggest box, you can call this function to prepend their query with "guy_". Making the final query = "guy_jim". The search query is passed into this function. Example: beforeRetrieve: function(string){ return string; }

I have never used this control before, but it looks like you're going to want to look into the jquery.autoSuggest.js file (non minified). Check out this case statement. I think you'll need to change the default: case to case x: where x is the ascii code for the key you want to use to trigger the autocomplete.

                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;
                }

Could be more like this

                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
                }