How to improve performance of Jquery autocomplete

Question

I was planning to use jquery autocomplete for a site and have implemented a test version. Im now using an ajax call to retrieve a new list of strings for every character input. The problem is that it gets rather slow, 1.5s before the new list is populated. What is the best way to make autocomplete fast? Im using cakephp and just doing a find and with a limit of 10 items.

Answer 1

This article - about how flickr does autocomplete is a very good read. I had a few "wow" experiences reading it.

"This widget downloads a list of all of your contacts, in JavaScript, in under 200ms (this is true even for members with 10,000+ contacts). In order to get this level of performance, we had to completely rethink how we send data from the server to the client."

Answer 2

Try preloading your list object instead of doing the query on the fly.

Also the autocomplete has a 300 ms delay by default.
Perhaps remove the delay

$( ".selector" ).autocomplete({ delay: 0 });

Answer 3

1.5-second intervals are very wide gaps to serve an autocomplete service.

1. Firstly optimize your query and db connections. Try keeping your db connection alive with memory caching.
2. Use result caching methods if your service is highly used to ignore re-fetchs.
3. Use a client cache (a JS list) to keep the old requests on the client. If user types back and erases, it is going to be useful. Results will come from the frontend cache instead of backend point.
4. Regex filtering on the client side wont be costly, you may give it a chance.

Answer 4

Before doing some optimizations you should first analyze where the bottle-neck is. Try to find out how long each step (input → request → db query → response → display) takes. Maybe the CakePHP implementation has a delay not to send a request for every character entered.

Answer 5

The real issue for speed in this case I believe is the time it takes to run the query on the database. If there is no way to improve the speed of your query then maybe extending your search to include more items with a some highly ranked results in it you can perform one search every other character, and filter through 20-30 results on the client side.

This may improve the appearance of performance, but at 1.5 seconds, I would first try to improve the query speed.

Other than that, if you can give us some more information I may be able to give you a more specific answer.

Good luck!

Answer 6

Server side on PHP/SQL is slow.

Don't use PHP/SQL. My autocomplete written on C++, and uses hashtables to lookup. See performance here.

This is Celeron-300 computer, FreeBSD, Apache/FastCGI.

And, you see, runs quick on huge dictionaries. 10,000,000 records isn't a problem.

Also, supports priorities, dynamic translations, and another features.

Answer 7

Autocomplete itself is not slow, although your implementation certainly could be. The first thing I would check is the value of your delay option (see jQuery docs). Next, I would check your query: you might only be bringing back 10 records but are you doing a huge table scan to get those 10 records? Are you bringing back a ton of records from the database into a collection and then taking 10 items from the collection instead of doing server-side paging on the database? A simple index might help, but you are going to have to do some testing to be sure.