5

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?

Andrew Whitaker
  • 119,029
  • 30
  • 276
  • 297
user1906418
  • 139
  • 8
  • In other words, if a local result doesn't exist, make an AJAX call? Or do you always want to make an AJAX call? – Andrew Whitaker Dec 26 '12 at 20:20
  • Actually in any case make the ajax call, sequentially. In other words, if you have two sources, and you don't do the combination on server side, is there a way to combine the result from the two sources via javascript? – user1906418 Dec 27 '12 at 17:10
  • Yes, there is. I think I have enough information to post an answer – Andrew Whitaker Dec 27 '12 at 17:26

1 Answers1

6

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/

Andrew Whitaker
  • 119,029
  • 30
  • 276
  • 297