Autocomplete AJAX request based on input instead of returning all results

Question

I am using this autocomplete plugin called FCBKcomplete and its works as charm. My only problem and concern is, apparently (that is how I think) when ever I enter a char in the input to get the result in the drop down, all the result will be returned as a JSON response and then that response will be searched to display my results on drop down.

in other word, say the following is my url:

http://this.com/usersAPI.do

The search query will be something like:

select * from user_table 

When the request gets sent to this url all the results will be back and the size is not small at all.

what I am looking for is way that I can search for those chars that I enter in the input field. so a url like this:

http://this.com/usersAPI.do?name=?

so that the query executed is something like

select * from user_table where name like xxx

xxx is the chars I have entered so far. so is the next char I enter is y the query changes to

select * from user_table where name like xxxy 

and so on

This is result in a lighter JSON response and less load on servers.

So please help me out thanks,

Answer 1

hi you can use something like this.

    $( "#fieldId").autocomplete({
         source: 
        function( request, response ) { 
             $.ajax({
                 url: "test.do",
                 data : {"searchText":request.term}
                 context: document.body
                 }).done(function() {
                     response( $.map( data.dropValues, function( item ) {
                                    var returnObj = new Object();
                                    returnObj['label'] = item.id + '--' + item.value;
                        }
                 }); 
        },
        minLength: 1, 
        mustMatch:true,
        autoSelect :true,
        delay:0,
        }).data( "autocomplete" )._renderItem = function( ul, item ) { 
        var html = '<li><a>' + item.label;
            html += '</a></li>';
        return $(html).data('item.autocomplete', item).appendTo( ul );
    };