I have an ajax search box that goes to the server on every key stroke and returns the result of the search. When the user types quickly, I want to search only on the last entry and not on every key stroke. Otherwise the individual results flash annoyingly and the whole process is slowed.

For example: if the user types "statue of liberty" quickly, I don't want to search on "sta", "stat", "statu" etc.

the basics of my jQuery code is:

$('#searchbox').keyup(function(){
    if (this.value.length > 2) {    
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
        });
    }
});        


<input id="searchbox" />
<div id="gen_results"></div>

I have an ajax search box that goes to the server on every key stroke and returns the result of the search. When the user types quickly, I want to search only on the last entry and not on every key stroke. Otherwise the individual results flash annoyingly and the whole process is slowed.

For example: if the user types "statue of liberty" quickly, I don't want to search on "sta", "stat", "statu" etc.

the basics of my jQuery code is:

$('#searchbox').keyup(function(){
    if (this.value.length > 2) {    
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
        });
    }
});        


<input id="searchbox" />
<div id="gen_results"></div>

• javascript
• jquery
• ajax

7 Answers 7

use setTimeout or jQuery's autocomplete plugin

var timer;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
        if (timer){
                clearTimeout(timer);
        }
        timer = setTimeout(function(){
                $.post("remote.php",{'partial':this.value},function(data){
                $("#gen_results").html(data);
                });
        }, 1000);
    }
});

You need to use a timeout, this one is set to 500ms, but you might want to go quicker.

$('#searchbox').keyup(function(){
  window.clearTimeout(window.timeOutId);
  window.timeOutId = window.setTimeout(function() {
    if (this.value.length > 2) {    
      $.post("remote.php",{'partial':this.value},function(data){
       $("#gen_results").html(data);
      });
    }
  },500); 
}); 

Hope that works for you!

Try this

var inProgress = false;
$('#searchbox').keyup(function(){
    if (this.value.length > 2 && !inProgress) {    
        inProgress  = true;
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
            inProgress = false;
        });
    }
}); 

This way you dont have to maintain a timer, just another call if the previous call is complete and by that time user has typed something more.

function getResults(value) {
   return function() {
       $.post("remote.php",{'partial':value},function(data){
           $("#gen_results").html(data);
       });
   };
}

var timerId;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
          clearTimeout(timerId);
          timerId = setTimout(getResults(this.value), 1000);
    }
});  

I did something similar once. What I did was set a timer each 500ms, and when the timer is called it does the AJAX request. The trick is that whenever the user typed something, I would reset the timer.

You could have a global variable holding the timestamp of the last keystroke. When the keyup method is called, take a timestamp reading and compare it to the previous value. If it is over a certain time frame, make your call, otherwise, reset the global value and exit.

Instead of building this yourself have a look at the jQuery Autocomplete plugin.

Using this you can set a delay option so that requests wait for a given period after a keystroke.

The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.