jQuery Autocomplete source property as function(){} is very slow

Question

I have two test cases using a reasonably large json object (1.2mb):

source: data

and

source: function (request, response) {
                response(data);
            }

In the first case the autocomplete works as I'd expect.

In the second case, autocomplete works occasionally and is very slow. Sometimes the browser hangs for 3-4 seconds "not responding" before it frees up again.

What's happening differently in the second case compared to the first?

(I wil be putting some filtering logic in this function at some point but for now I'm testing like this).

Answer 1

Your data set is being filtered when passing it in as a local object, but is not being filtered when using the callback (would be the programmers responsibility).

When using source: data autocomplete filters the result set for you:

response($.ui.autocomplete.filter(array, request.term));

When using the callback source: function(request, response) { response(data) } no filtering is being applied, thus your page is generating markup for 1.3MB of json.

When autocomplete loads data from a local source it caches the data. When it is retrieved remotely it is not cached by default.

This jQuery UI Autocomplete documentation explains the behavior and suggests how to implement caching for a remote call.

http://jqueryui.com/demos/autocomplete/#remote-with-cache