CODEWITHSUNDEEP
ajaxjquery-uiautocompletejquery-autocompletejquery-ui-autocomplete
user1906418
user1906418

Reputation: 139

Combining a local source and remote source in jquery ui autocomplete

I included locally in javascript a list of commonly used terms, and then I would also like to get json response from the server through ajax response. How can it be done?

var projects = ["apple", "orange"];

$('#search').autocomplete({
    source: projects
});

then append the result from ajax?

Upvotes: 5

Views: 2031

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

The way you would go about this would be to combine the results you get back from the server with the local results array. You can accomplish this by passing a function to the source option of autocomplete:

There are three steps you'll have to perform:

  1. Make the AJAX request and get results from the server.
  2. Filter the local array
  3. Combine the results

This should be pretty simple. Something like this would work:

$("input").autocomplete({
    source: function(request, response) { 
        /* local results: */
        var localResults = $.ui.autocomplete.filter(localArray, request.term);

        /* Remote results: */
        $.ajax({
            /* AJAX options omitted... */
            success: function(data) {
                /* Process remote data using $.map, if necessary, then concatenate local
                 * and remote results. 
                 */
                response(data.concat(localResults));
            }
        });
    }
});

I've worked up a full example here: http://jsfiddle.net/FZ4N4/

Upvotes: 6

Related Questions