Slow loading jQuery Autocomplete

Question

Hi I am building an internal app for my company using jQuery's autocomplete and am finding it tends to start off very slow. My assumption is that the bottle neck is perhaps adding its elements to the DOM since after the first query it seems to be substantially speedier. Does anyone know of a way to pre-load these elements on page load instead of doing it for the first time when the user starts typing?

Answer 1

If you don't have to use ajax calls to retrieve data, and your autocomplete list isn't too big, you can feed the data for autocomplete from js array of objects.

Lets assume you have such data (that you build as early as you want/can):

var data = [{"n":name, "p":pagename,"c":number_of_results},...];

Then autocomplete call would look:

$("#autocomplete").autocomplete(data, {
    matchContains: true,
    formatItem: function(row, i, max) {
        return row.n + " ("+row.c+")";
    },
    formatMatch: function(row, i, max) {
        return row.n;
    },
    formatResult: function(row) {
        return row.n;
    }

});
$("#autocomplete").result(function(event, data, formatted) {
    if(!data) {
        alert("Please select an item");
    } else {
        window.location.href =  data.p;
    }
});

This will create an autocomplete that would look like item name (number of results), and on clicking on an item it would redirect to a corresponding item pagename.

I have about 1,000 items and the autocomplete speed is instant.