Stop Ajax if ? (Autcomplete with multiple values)

user_3145932 0
Viewed 32

So, I'm working on a very simple autocomplete script with multiple values (seperated with a coma) using jQuery. Suggestions start if the last tag length > 1, else it should not trigger and remove any suggestion.

Here is the code:

function show_tags () {
            var tags = jQuery( this ).val();
            var last_tag= getLast(tags);

            if (last_tag.length>1) {

                jQuery.ajax({
                  url: ajaxurl,
                  type: "POST",
                  data: {
                    'action': 'suggest_tags',
                    't': tags
                  }
                }).done(function(response) {
                    jQuery('.suggestions').html(response);
                });
            }
            else {
                jQuery('.suggestions').html('');
            }
        }

jQuery( ".search-field" ).on( "keyup", show_tags);

But...

I figured out that it might not be the best way to do this, since if someone type too quickly, the else part will trigger before the previous ajax requests are done.

How could I abort the previous requests if the user type a coma quickly after, and so, if last_tag length <=1 ?

I feel like I will have to rethink the whole thing just for that. Is there not a quick fix? I'm kind of lost and tired.

Any help?

autocomplete jquery ajax
1 Answers

I suggest that you disable the element one the Ajax start, and enable it once finished, using .prop(), another way is for sure to throttle/debounce Ajax calls (not sure if that plugin works for jQuery 3 though) : 

function show_tags () {
    var textInput = jQuery( this );
    var tags = jQuery( this ).val();

    var last_tag= getLast(tags);

    if (last_tag.length>1) {
        textInput.prop( "disabled", true );
        jQuery.ajax({
          url: ajaxurl,
          type: "POST",
          data: {
            'action': 'suggest_tags',
            't': tags
          }
        }).done(function(response) {
            jQuery('.suggestions').html(response);
            textInput.prop( "disabled", false );
        });
    }
    else {
        jQuery('.suggestions').html('');
    }
}

jQuery( ".search-field" ).on( "keyup", show_tags);
user_8963580
Related