How to send ajax call on server side each time user enter some text in jquery autocomplete for ajax plugin

Question

HI i am using http://www.devbridge.com/sourcery/components/jquery-autocomplete/ for autocomplete box.My case is is that whenever a user eneter 3 character or more then 3 then it should start autocomplete functionality each time by searching the entered text in database.I binded my function in my js like this

`function bindAutoComplete($id){

    var as = $(document.getElementById($id)).autocompleteABC({
            serviceUrl: "showCountries.json",
            params: "data="+document.getElementById($id).value,
            lookupFilter: function(suggestion, originalQuery,queryLowerCase) {
                var re = new RegExp($.Autocomplete.utils.escapeRegExChars(queryLowerCase.trim()), 'gi');
                re.toString().trim();
                return re.test(suggestion.value.trim());
            },
            onSelect: function(suggestion) {
            },

            onInvalidateSelection: function() {
            }
    });

    $(document).on('onkeypress', '#'+$id, function(){
        as.setOptions({params:"data="+$(this).val()});
    });

}`

whenever the page load , it binds this autocomplete at multiple places wherever i need it. But the problem is that it bind the url of ajax call and data to be send as param at page load only and i am not able to change this param at runtime.

I need that whenever user enter text in aautocomplete box, that text should go to server side and searching that text in database, i should throw result on UI.

How can i bind this function or change the plugin code so that each time user enter something more then 3 characters, an ajax call should go on server side with that text entered.

Answer 1

I don't think you are using the plugin correctly, you are doing so much manual handling that the plugin should automatically do for you.

• you don't need to pass the value of your search field in params
• you don't need the bindAutoComplete function
• you don't need the onkeypress event handler

Also why are you calling autocompleteABC insead of autocomplete ?

Your code should be as simple as this example:

var a = $('#query').autocomplete({
    serviceUrl:'service/autocomplete.ashx',
    minChars:3,
    // callback function:
    onSelect: function(value, data){ alert('You selected: ' + value + ', ' + data); }
});

Where #query is the id of the input field where you type your search and serviceUrl is your server side script processing the request and returning the matches.