Combining a local source and remote source in jquery ui autocomplete

Question

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?

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
– Andrew Whitaker, Commented Dec 26, 2012 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
– user1906418, Commented Dec 27, 2012 at 17:10
Yes, there is. I think I have enough information to post an answer — Andrew Whitaker
– Andrew Whitaker, Commented Dec 27, 2012 at 17:26

Andrew Whitaker · Accepted Answer · 2012-12-27 19:36:54Z

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:

Make the AJAX request and get results from the server.
Filter the local array
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/

answered Dec 27, 2012 at 19:36

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jane Panda Over a year ago

What if you want to show the local results and then append the remote results once they are available?

Jane Panda Over a year ago

Well I feel stupid. You just call response() again with the new results.

Collectives™ on Stack Overflow

Combining a local source and remote source in jquery ui autocomplete

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related