Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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 = $

Thanks!

like image 941
Mitch Moccia Avatar asked Nov 15 '22 04:11

Mitch Moccia


1 Answers

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

like image 110
Francesco Laurita Avatar answered Jan 11 '23 01:01

Francesco Laurita