Ajax request not aborting

Question

I have a basic live search built with jQuery ajax which searches through a JSON file from the server and outputs a list of events.

My script is set so that if the search text box has less than 2 characters, it should display the list of the events which were already displayed on the page prior to the user using the ajax search.

var currentEvents = $(".event-list-container").contents();

    if(searchField.length < 2)
    {
        if(currentRequest != null) {
            currentRequest.abort();
        }

        $('.event-list-container').empty();
        $('.event-list-container').append(currentEvents);
    }

The issue I am having is that if the user were to quickly empty the textbox (e.g. by doing CTRL + A & backspace), the currentEvents would display and then the ajax request after that and therefore remove the currentEvents and display the results for what was in the search textbox before the user had emptied it.

Below is the full script for this:

$(document).ready(function () {

var currentEvents = $(".event-list-container").contents();
var currentRequest = null;  
var searchField;
var expression; 

    $.ajaxSetup({
    cache: false
});

$('#refine-event-txtbox').keyup(function () {
    searchField = $('#refine-event-txtbox').val();
    expression = new RegExp(searchField, "i"); 

    if(searchField.length < 2)
    {
        if(currentRequest != null) {
            currentRequest.abort();
        }

        $('.event-list-container').empty();
        $('.event-list-container').append(currentEvents);
    }
    else
    {
        searchEvents(currentRequest, searchField, expression);
    }
});

function searchEvents(currentRequest, searchField, expression)
{
    currentRequest = jQuery.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:8000/api/events',
        success: function(data) {
            $('.event-list-container').empty();  
            $.each(data, function (key, value) {
            if (value.title.search(expression) != -1 ||
                value.location.search(expression) !=
                -1) {

                var startDate = value.startDate;
                var startDateDay = moment.utc(startDate).format('D');
                var startDateMonth = moment.utc(startDate).format('MMM');
                var fullDate = moment.utc(startDate).format('D MMM YYYY');
                var eventURL = "/events/" + value.id + "/" + value.title;
                eventURL = eventURL.replace(/\s+/g, '-').toLowerCase();
                $('.event-list-container').append(
                    `<div class="event-box">
                        <div class="row">
                            <div class="col-xs-12 col-sm-2 col-md-2 col-lg-1">
                                <div class="date">
                                    <p class="day">${startDateDay}</p>
                                    <p class="month">${startDateMonth}</p>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-4 col-md-3 col-lg-3">
                                <div class="event-image">
                                    <a href="${eventURL}">
                                        <img class="img-responsive" src="${value.image}">
                                    </a>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6 col-md-7 col-lg-7">
                                <div class="event-details">
                                    <h2 class="title">
                                        <a href="${eventURL}">${value.title}</a>
                                    </h2>
                                    <p class="when"><span class="inline-title">When: </span>${fullDate} | ${value.startTime}-${value.finishTime}</p>
                                    <p class="where"><span class="inline-title">Where:</span>${value.location}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    `);
            }
        });
        },
        error:function(e){
        // Error
        }
    });
}});

As you can see inside the $('#refine-event-txtbox').keyup function if the search field length is set to less than 2, it should check to see if there is an ajax request and if so then abort it but the script is not doing this.

Answer 1

Figured it out. Adding the below to my ajax function as well as doing Shitole's answer seemed to do the trick.

         beforeSend : function()    { 
            if(currentRequest != null) {
                currentRequest.abort();
            }
        },

Answer 2

You can remove the reference of currentRequest from the function searchEvents.

Function Call:

searchEvents(searchField, expression);

And function:

 function searchEvents(searchField, expression) {
    .......
 }

Try now..!