Question

I have a search textbox where upon a keypress an AJAX call is made to return search results for the entered text. This results in an AJAX call being made for every single keypress.

For example if I type in airport:

I get 7 ajax requests each searching for a, ai, air, airp, airpo, airpor, airport respectively – however the problem is that they might all start one after the other but don’t necessarily end in the same order so more often than not I receive results in the wrong order i.e I might have written airport and received the result for airport only to receive the result for airpo later on.

How do I handle this in jQuery here?

Update:

There is a timer delay of 3 seconds – but the issue is in ensuring that when one AJAX request is made, another Request when made cancels out the previous request and so forth.

How could I do this in code?

Answer 1

Fire the ajax call on a delay – use this in conjunction with the abort() code above:

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

$("#searchField").keypress(function(){
    typeDelay(function(){
        // your ajax search here, with a 300 ms delay...
    }, 300);
});