Question

I am making a live search box and it seems that if I type normally and fast, it does not clear the html results in the div. Instead it puts the results for each keystroke in the div.

$('.searchbox').live('keydown', function(e){
  searchnow = $('.searchbox').val();
  $('#searchresultssmall').html(" ");
  setTimeout(function(){
 $('#searchresultssmall').show();
 fetch(400,"task=search&search="+searchnow);
   },1000);
 });

My fetch code is WAY too big, but is a piece of it

case 400:
if(obj.id)
{
$('#searchresultssmall').append('<div class="smallresult">'+obj.username+'</div>');
}
break;

Answer 1

You need to clear the previous timer. Optimized code would be:

var showResultsTimer = 0;
$('.searchbox').live('keydown', function(e){
    searchnow = this.value;
    var oResultPanel = $('#searchresultssmall');
    oResultPanel.html(" ");
    if (showResultsTimer)
        window.clearTimeout(showResultsTimer);
    showResultsTimer = window.setTimeout(function(){
        oResultPanel.show();
        fetch(400,"task=search&search="+searchnow);
    },1000);
});

This will show only the final value.

Edit: quick test reminded me that using keydown is wrong in your case, as you’ll always miss the last character entered by the user. Use keyup instead.

Live test case.