Question

i have an input search like this:

<input type="search" autocomplete="off" name="searchSchools" id="searchSchools" value="" onKeyUp="searchSchools(this.value)" />

As you can se, every time the onKeyUp event is fired i call a function named “searchSchools” where i search schools matching the current value of the input search in PHP and i return them in JSON format, the problem is that if i type fast more than one request is sent to the PHP page and i want to prevent this, i want to send the post request to the page only if there is no other request to the same page made by this function.

Here is the function:

function searchSchools(name){
    $.post("search-schools.php", { name: name },
    function(data) {
        //-> Here i do whatever with data returned
    }, 
    "json"
    );
}

Answer 1

Add a delay in $.post.. Try like below,

var timer = null, xhrReq = null;
function searchSchools(name){
    if (timer != null) {
       clearTimeout(timer);
    }

    timer = setTimeout(function () {
        if(xhrReq != null) {
           xhrReq.abort(); //to kill all prev request and take the latest
        }

        xhrReq = $.post("search-schools.php", { name: name },
           function(data) {
              //-> Here i do whatever with data returned
           }, 
           "json"
         );
    }, 1000); //will be posted only after 1 second.
}

Edit: Added xhr.abort() to abort any old request and consider only the latest..