How do you solve the "lag" problem of a live search?

Question

hi i am implementing a live search (=search as you type) feature in my webapp. currently i am using the keyup event to send the search request via ajax post e.g.

$('#SearchField').keyup(function(e) {
        $.post(
           ...
        );
});

but this leads to some kind of lag problem, in some cases when i search, for example after "problem", the response for "pro" shows up way after the response for "problem" and overwrites the correct search result with a way to big result.

what would be a good approach to combat this behavior?

tia

Answer 1

$('#SearchField').keyup(function(e) {
  t = setTimeOut(function(){        
    $.post(
           ...
    );
  },1000);
});

With this code, your function will be executed after 1000ms. If the keyup gets triggered again, it will overwrite the variable, and effectively cancel the first function. In other words, the entire post will not happen untill the user stops typing for 1 second.

Answer 2

I have implemented a "live search" once and used a timeout to only start the search after no input had been made for a period of time (half a second or so). This way the search would only trigger, if the user stopped typing, reducing delayed results and server-load.

In your case I'd check, if the user continued typing and won't submit the search or display any "old" result which is arriving to late.

Answer 3

you can abort previous request

var xhr = null;
$('#SearchField').keyup(function(e) {
  if (xhr !== null) xhr.abort ();
  xhr = $.post(
    ...
  );
});

or set assign id to each request. when a request complete, if a greater id already come back, ignore the answer. otherwise, store the id.

Answer 4

Most auto-completes dont replace what the user is typing - they show the possible options in a drop down the user can then select.

Here's a wonderful example of an already well-written auto complete: http://view.jquery.com/trunk/plugins/autocomplete/demo/

Answer 5

As you've been discovering, there are a lot of tricky UI (User Interface) or UX (User Experience) issues involved in creating a great live search experience.

I leave the heavy lifting of UI/UX testing to the folks at Yahoo who have developed the auto complete control they use on their web properties. And the better news is that they've released it as open source: http://developer.yahoo.com/yui/autocomplete/

The not-as-good news is that it doesn't use JQuery and you do. You could look at their source and see how they handle the multiple issues of timing, etc. Note that they start their timer on key down, not key up.

There's also a good article about how Flickr uses the Yaho autocomplete for implementing in-page search: http://code.flickr.com/blog/2009/03/18/building-fast-client-side-searches/

Answer 6

the trick is using aborts and ajax queues, I wrote a custom library for the live search I created, filters through 20 million records like butter (granted optimized eav tables help with query speeds). there is also a jquery ajax manager plugin available that works nicely ( i need something a little more sophisticated so I wrote my own). you can set queue number, abort on new call etc..this way nothing gets requested until the final user input