Instant search function in Javascript

Question

I am using the following javascript for my instant search function (to detect when the visitor stops writing, so the function won't run on every single keyup).

It works but it’s more delay than 1000 milliseconds. Even if I set it to 200 milliseconds it’s 1-2 seconds delay before the instant search function runs.

Is there a better/faster way to detect when the visitor has stopped typing in the input (I only need it for Internet Explorer if that’s make any difference).

$(document).ready(function(){

var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();

$('input').keyup(function() {
delay(function(){
//instant search function here
}, 1000 );
});

});

New idea: When I think about it the problem is that I can’t continue writing in the input filed when the function runs. Any solution for that and I will not be needing any delay function.

Answer 1

function instantSearch(){ ... }

var timer;
$('input').keyup(function(){
   timer && clearTimeout(timer);
   timer = setTimeout(instantSearch, 200);
});

Answer 2

Is your instant search function making an AJAX request to return results? That might be the difference between setting the delay to 200ms and getting your response back 1-2s later.

Answer 3

If you're using the keyup event it shouldn't be necessary to specify a delay unless there are specific limits on queries-per-second or something similar.

There's a fairly concise walkthrough here: http://blog.comperiosearch.com/2012/06/make-an-instant-search-application-using-json-ajax-and-jquery/