jquery keyup cancelation when another keyup event fires

Question

I am trying to stop displaying some data in table while I am typing text in website inbox.

I have event keyup whitch searches some data in database and then displays it on website. But when somebody is typing longer text an event is fired as many times an many letters is being typed. I want to cancel last event when another sign is typed so only last event will display correct data.

righ now when I type some text fast I get displayed data twice or even more....

the code I use (simplified version) is below...

Can someboty suggest how can I sole it?

$( "#SAPdescription" ).keyup(function() {
    // Clear table
    $('#tblListSAP tbody').empty();

    if($('#SAPdescription').val().length >= 3)
    {
        $.ajax({
            type: "POST",
            url: "php/list_SAP.php",
            data: {
                SAPdescription: (!$('#SAPdescription').val()) ? "NULL" : $('#SAPdescription').val()
            },
            success: function(msg){
                if(msg.substr(0,5) == 'ERROR')
                {
                    error(msg);
                }
                else
                {
                    if(xmlRoot = getXML(msg))
                    {       
                        var rows = $(xmlRoot).find('row');
                        for(var i=0 ; i<rows.length ; i++)
                        {
                            var tr = $('<tr></tr>');

                            tr.append($('<td></td>').text(rows.eq(i).find('sapdescription').eq(0).text()));


                            $('#tblListSAP tbody').append(tr);
                        }
                    }
                    else
                    {
                        error('No data in received XML file!');
                    }
                }
            },
            error: AjaxErrorFunction
        });
    }
});

what about deferring the function so that it doesn't fire for 250ms (or whatever you choose) after key up. Resetting the timer every time the user presses a key? — Hazonko, Feb 20 '18 at 11:59
Possible duplicate of [Abort Ajax requests using jQuery](https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) — Hazonko, Feb 20 '18 at 12:17

score 0 · Answer 1 · answered Feb 20 '18 at 12:16

Something like this. Untested and written in notepad, hopefully it'll work...

Deferring the function to prevent constant calls and aborting it if it is mid call as well.

var xhr = null;
var timer = null;

$( "#SAPdescription" ).keyup(function() {
    // Clear table
    $('#tblListSAP tbody').empty();

    if($('#SAPdescription').val().length >= 3)
    {
        //if timer exists, reset it
        if (timer != null) {
            clearTimeout(timer);
            timer = null;
        }
        //abort the ajax call
        if (xhr != null) {
            xhr.abort();
            xhr = null;
        }

        //call function in 250ms to prevent it being repeatedly called every keyup
        timer = setTimeout(getList, 250);
    }
});

function getList() {
    xhr = $.ajax({
        type: "POST",
        url: "php/list_SAP.php",
        data: {
            SAPdescription: (!$('#SAPdescription').val()) ? "NULL" : $('#SAPdescription').val()
        },
        success: function(msg){
            if(msg.substr(0,5) == 'ERROR')
            {
                error(msg);
            }
            else
            {
                if(xmlRoot = getXML(msg))
                {       
                    var rows = $(xmlRoot).find('row');
                    for(var i=0 ; i<rows.length ; i++)
                    {
                        var tr = $('<tr></tr>');

                        tr.append($('<td></td>').text(rows.eq(i).find('sapdescription').eq(0).text()));


                        $('#tblListSAP tbody').append(tr);
                    }
                }
                else
                {
                    error('No data in received XML file!');
                }
            }
        },
        error: AjaxErrorFunction
    });
}

jquery keyup cancelation when another keyup event fires

1 Answers1