JQuery autocomplete source property as a function () {} is very slow

Question

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

source: data 

and

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

In the first case, autocomplete works as I expected.

In the second case, autocomplete works from time to time and is very slow. Sometimes the browser freezes for 3-4 seconds, “not reacting” before it is released again.

What happens in the second case compared to the first?

(At some point, I will put some filtering logic in this function, but now I'm testing it).

Answer 1

Your data set is filtered when it is transferred as a local object, but not filtered when using a callback (will it be the responsibility of the programmers).

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

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

When using the source: function(request, response) { response(data) } callback, filtering is not applied, so your page generates markup for 1.3 MB json.

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

The jQuery UI AutoFill documentation explains the behavior and suggests caching for a remote call.

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

Strike>