Javascript Abort function not WOrking.

[lilmer]

I've got this

<input type="text" class="search admin-managers" onkeyup="onSearch(this.value)">

and my Javascript funcion

function onSearch(value){
        
       if(request != null) request.abort();
       
       var request =  $.ajax({
                type: "POST",
                url: url+'searchManager',
                data: {search:value},               
                success: function(html)
                {    
                  
                   $('#theResult').html(html);
                }
                }); 
   
}

I want to abort the past ajax call so it will not affect the current ajax call but the function ".abort()" is not working. Is their a problem with my code?

[kicken]

You're going to give a better explanation than "not working". What are you expecting to happen? How are you determining if it is working or not? Are there error messages?

[lilmer]

Okay then.

 

Every input that the user make an ajax call is triggered, so what I want to happen is if he/she continue inputting text on the text box it will abort the previous ajax call but not the last call of course. I thought using javascript function "abort" and putting it before the ajax call it will stop the previous request but it ain`t happening.

 

Thanks.

[nogray]

You need to make the request a global variable. e.g.

// global variable
var request;

function onSearch(value){
        
       if(request != null) request.abort();
       // no "var" infront of request
       request =  $.ajax({

[kicken]

Ideally you should not perform the request until there is a pause in the typing that way you don't end up just creating a bunch of requests only to immediately abort them. You can do this by using setTimeout to delay the function for a period of time. Eg:

var timeout=null;
var request=null;
function onSearch(value){
    if (timeout) clearTimeout(timeout);   

    timeout = setTimeout(function(){
        if (request) request.abort();

        request =  $.ajax({
            type: "POST",
            url: url+'searchManager',
            data: {search:value},               
            success: function(html){    
                $('#theResult').html(html);
            }
        }); 
    }, 150);
}

That will delay the request for 100ms so that someone typing quickly will not cause a bunch of requests to be created then aborted. Only a single request will be made once they have a small break in typing.

[lilmer]

Alright, thank you for the example of mostly for the idea you've shared. I'm going to try your example.