如果停止Ajax？ （具有多个值的自动完成功能）

由 发布于 ajaxjqueryautocomplete
 收藏

因此，我正在使用jQuery处理具有多个值（以逗号分隔）的非常简单的自动完成脚本。 如果最后一个标签长度> 1，则开始建议，否则不应触发并删除任何建议。

这是代码：

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);

但...

我发现这可能不是最好的方法，因为如果有人键入得太快，则else部分将在完成先前的ajax请求之前触发。

如果用户在此之后快速键入昏迷，并且last_tag length <= 1，我该如何终止先前的请求？

我觉得我将不得不为此重新考虑整个事情。没有快速解决方法吗？ 我有点迷失和疲倦。

有什么帮助吗？

评论
惊魂者
惊魂者

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);
点赞
评论