Techniques to make autocomplete on website more responsive

Question

In my website's advanced search screen there are about 15 fields that need an autocomplete field.
Their content is all depending on each other's value (so if one is filled in, the other's content will change depending on the first's value).
Most of the fields have a huge amount of possibilities (1000's of entries at least).

Currently make an ajax call if the user stops typing for half a second. This ajax call makes a quick call to my Lucene index and returns a bunch of JSon objects. The method itself is really fast, but it's the connection and transferring of data that is too slow.

If I look at other sites (say facebook), their autocomplete is instant. I figure they put the possible values in their HTML, so they don't have to do a round trip. But I fear with the amounts of data I'm handling, this is not an option.

Any ideas?

Answer 1

1. Return only top x results.
2. Get some trends about what users are picking, and order based on that, preferably automatically.
3. Cache results for every URL & keystroke combination, so that you don't have to round-trip if you've already fetched the result before.
4. Share this cache with all autocompletes that use the same URL & keystroke combination.
5. Of course, enable gzip compression for the JSON, and ensure you're setting your cache headers to cache for some time. The time depends on your rate of change of autocomplete response.
6. Optimize the JSON to send down the bare minimum. Don't send down anything you don't need.

Answer 2

Are you returning ALL results for the possibilities or just the top 10 as json objects.

I notice a lot of people send large numbers of results back to the screen, but then only show the first few. By sending back small numbers of results, you can reduce the data transfer.

Answer 3

Return the top "X" results, rather than the whole list, to cut back on the number of options? You might also want to try and put in some trending to track what users pick from the list so you can try and make the top "X" the most used/most relvant. You could always return your most relevant list first, then return the full list if they are still struggling.

Answer 4

In addition to limiting the set of results to a top X set consider enabling caching on the responses of the AJAX requests (which means using GET and keeping the URL simple).

Its amazing how often users will backspace then end up retyping exactly the same content. Also by allowing public and server-side caching your could speed up the overall round-trup time.

Answer 5

• Cache the results in System.Web.Cache
• Use a Lucene cache
• Use GET not POST as IE caches this
• Only grab a subset of results (10 as people suggest)
• Try a decent 3rd party autocomplete widget like the YUI one

Answer 6

Returning the top-N entries is a good approach. But if you want/have to return all the data, I would try and limit the data being sent and the JSON object itself.

For instance:

"This Here Company With a Long Name" becomes "This Here Company..." (you put the dots in the name client side--again; transfer a minimum of data).

And as far as the JSON object goes:

{n: "This Here Company", v: "1"}

... Where "n" would be the name and "v" would be the value.