49

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.

casperOne
  • 73,706
  • 19
  • 184
  • 253
Björn
  • 1,593
  • 1
  • 13
  • 28
  • Does the 1.5s include the autocomplete's wait time (that is, the time it waits to make sure you aren't typing additional characters)? – Powerlord May 04 '09 at 16:34
  • What does this query look like? 1.5s for 10 items is ridiculously slow. See my other comment below about SOLR. Worked like a charm for us with millions of rows to go through. – akahunahi Apr 23 '13 at 02:05
  • Best improvement... use the chosen jquery plugin! – Paul Zahra Oct 18 '16 at 15:57

7 Answers7

54

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."

cllpse
  • 21,396
  • 37
  • 131
  • 170
  • 1
    So they just send a csv-list to the user? – tstenner Feb 13 '11 at 18:53
  • Can anyone please help me to understand how can I use it? I am currently using Ajax request to the server and JSON as a medium. Server side is written in C#.NET . A handle is implemented there to serve the request. – soham Jul 01 '13 at 08:54
39

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 });
Darren Cato
  • 1,382
  • 16
  • 22
  • +1 for delay. I forgot this is one of the reason. I don't know why the default delay time is 300 ms but not 0 ms. –  Jan 21 '13 at 17:37
  • 1
    +1 here as well if your queries are fine. If your queries take that long for 10 list items, then something is wrong with your queries and this is not the answer you need. – akahunahi Apr 23 '13 at 02:02
  • 1
    Official JQuery which say default value for delay option https://api.jqueryui.com/autocomplete/#option-delay – ahmed hamdy Nov 18 '15 at 20:21
  • 1
    @DarrenCato +1 Thank-you so much! Never knew about the default delay and users were complaining it was slow. You are a legend amongst men. – MasNotsram Mar 29 '17 at 12:53
11

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.
Burcu Dogan
  • 9,153
  • 4
  • 34
  • 34
5

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.

olegarch
  • 3,670
  • 1
  • 20
  • 19
  • How do you connect c++ and php to display data? – May'Habit Jan 23 '20 at 16:29
  • You can use any interface lib, for example - this: http://www.php-cpp.com/ ; In the my autocomp, I did not used PHP, I wrote FCGI program on C++, and run it from Apache. Currently, my demo si not work (comp has been crashed), but if need - I can provide you source. – olegarch Jan 23 '20 at 20:01
  • how amazing, your comment from 2010 and now you answer my question. I've read your comment and searched on google but I have no idea how my database and C++ are working. May I ask you some questions. I use mysql database, how do I fill data from mysql to C++ hash table?What kind of database you use and how do you pass it to C++ hash table? How FCGI program return data for browser? And thank you so much, please send me your source. – May'Habit Jan 24 '20 at 13:49
5

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.

Gumbo
  • 643,351
  • 109
  • 780
  • 844
4

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!

Mike
  • 3,219
  • 23
  • 29
  • Yeah I was going to propose that too.. Do some filtering at the client side. – Niyaz May 03 '09 at 18:04
  • Dude! Use SOLR. You can hit the url directly. I just finished integrating it into a project and that will solve your db query issues. You can even load the data into SOLR from MySQL (which I assumed from cakephp). – akahunahi Apr 23 '13 at 02:04
1

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.

Sean Chase
  • 1,139
  • 1
  • 15
  • 23