Question

I have a search using jquery ui autocomplete which works great. Currently I preload a json list of cities and countries so that it loads quickly and has no need to poll the server. However now, I’d like to add to my autocomplete search specific names of places ie in my case hotels, restaurants, etc..

My question is should I just ditch the preloaded city and country list and do a plain vanilla ajax database query ?q= as they type, or is it possible and would it be useful to have some sort of hybrid between the two. IE a preloaded list until they reach a certain number of characters or there are fewer than 5 results?

Would it save load time or just be a headache? And if so, how should I go about it?

I originally had it as an ajax query but switched to the preloaded json to speed it up. The complete list of cities and countries is tiny, however the list of places is large. 99.9% of the time people will search for locations and not specific places.

Answer 1

How you would achieve this:

You could accomplish something like this by passing a function to the source option of autocomplete. Within that function, you would perform some logic to determine if you needed to use an AJAX call or simply filter the data on the client-side:

$("#tags").autocomplete({
    source: function(request, response) {
        // This is how autocomplete finds matching results by default:
        var results = $.ui.autocomplete.filter(common, request.term);

        if (results.length < 5) {
            // Perform an ajax call.
            // In the success method, call response(results)
        } else {
            response(results);
        }
    }
});

Both of your ideas for a “hybrid” autocomplete using two sources were intriguing. However, while testing out the solution, I encountered a potential usability problem. Normally with this type of control you would expect to get fewer results back as you type.

For example: lets say your local source array looks like this:

['jquery', 'jquery-ui', 'jquery-ajax', 'jquery-plugins']

And you use the strategy of showing more results after, say, 5 characters are typed. After the user types j-q-u-e-r-y, typing the y would trigger an AJAX call, populating the list with more results, which may not be straightforward for the user depending on your use case.

Example: http://jsfiddle.net/andrewwhitaker/wSBa3/

I think this gets better when you set some limit on the number of results that can come back from the server. If you sync this value up with the minimum number of results before an AJAX call occurs, the interaction doesn’t seem as funky. In fact, this example makes the concept more plausible to me:

Example: http://jsfiddle.net/andrewwhitaker/NxELC/

---

Is it worth it?

Would it save load time or just be a headache?

Maybe both!

I think this really depends on how resource-intensive the query is, how much data we’re talking about, and also how maintainable a solution like this would be. I can’t really speculate on the first two options, but I would say that you could run into a maintenance problem with maintaining two lists. That problem sort of depends on what server-side technology you’re using. I think if you did it correctly, you wouldn’t have any trouble though.

Apologies in advance for the lengthy answer, but I hope it helps.