Async search event handling

I have a web-based search input. At each onkeyup event, an async request is made, from the client with JavaScript, to a PHP document that returns the search response - then the JS takes the search response and writes it 开发者_开发知识库to the client. This part works fine.

However, my issue is when a user types their search term faster than the system can respond.

Let's say a user - that types fast - is doing a search for the word super. The user types s (and a search is done for s), while the search is being performed and written for s the user types u, and now a search for su is queued up. Then, this very fast typing user types a p, while the initial search for s is finishing up, and now searches for su and sup are queued.

If a user types slowly, there is no issue and my search tool can respond to each keyup without having to queue up search requests. However, if a user types very fast, they will see several search result refreshes flash before them after they finish typing their search term because the script is finishing up items in the queue.

How could I improve my code to improve the user experience?

For example, how would you script this so that any queued items, other than the last one made are dropped?

You can do this with a single timeout (called debouncing):

"Debouncing means to coalesce several temporally close signals into one signal."

var timer;
function keyup() {
  clearTimeout(timer);
  timer = setTimeout(function() {
    search(this.value);
    timer = null;
  }, timer ? 50 : 1);
}

This code means that if the user is typing too fast (delta <50ms in this case) the action won't queue up, but the newest always overwrites the previous ones.

There is another approach (called throttling):

"Throttling is the reduction in rate of a repeating event."

var timer;
function keyup() {
  if (!timer)
    timer = setTimeout(function() {
      search(this.value);
      timer = null;
    }, 100);
  }
}

Finally you can fetch more data at a time to get around latency issues.
See this post to see how Flickr does it: Building Fast Client-side Searches

Also make sure to use some kind of caching (APC/memcache) depending on how frequently your data changes. This can greatly reduce stress on your database.

I think the best solution is a timer for "onkeyup".

A sample with jQuery:

var timer = null;
$('input').keyup(function(){
    if(timer!=null){
        clearTimeout(timer);
    }
    // wait and call in 150 ms
    timer = setTimeout(function() {
        // call here your search function!
        ....
    }, 150);
});

As a few have mentioned, you can use a timeout to slow the pace of fetching results from the server. Note, though, that this will still show a small delay for the user.

If the data is a candidate for being fetched and stored on page load, you can provide a much faster auto-complete solution by simply retrieving it from the client-side memory.