Combining the local source and remote source jquery ui autocomplete

Question

I have included javascript locally in a list of commonly used terms, and then I would also like to get the json response from the server via ajax response. How can I do that?

var projects = ["apple", "orange"]; $('#search').autocomplete({ source: projects }); 

then add the result from ajax?

Answer 1

The way you do this will be to combine the results received from the server with a local array of results. You can do this by passing the function options source autocomplete

You need to complete three steps:

• Make an AJAX request and get the results from the server.
• Filter local array
• Combine Results

It should be pretty simple. Something like this will 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)); } }); } }); , if necessary, then concatenate local $("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 have reviewed here is a complete example: http://jsfiddle.net/FZ4N4/