当搜索字段为空时取消所有 ajax 请求

Question

如果搜索字段为空且搜索字符长度小于 3，则取消所有 Ajax 请求

$('#search-box').keyup(function() { // bind the search data

    var input = $('.search-input').val();

    if (input.length >= 3) {
        $.getJSON({ // get JSON data
            url: 'example.com?keyword=' + input,

            success: function(data) {


                    // do processing.
                    var output = "<ul class='search-lists'>"; //output search data list

                    $.each(data, function(key, val) {
                        output += '<li><a>' + val.term + '</a></li>';
                    });

                    output += '</ul>';
                    $('.search-results').html(output);




            }
        }); // JSON request
    }



}); // data bind

Answer 1

使用搜索输入框的 keyup 事件而不是部分元素。

$('#search').keyup(function() { // bind the search data
    var input = $('.search-input').val();
    if (input.length >= 3) {
        $.getJSON({ // get JSON data
            url: 'example.com?keyword=' + input,
            success: function(data) {
                // do processing.
                    var output = "<ul class='search-lists'>"; //output search data list

                    $.each(data, function(key, val) {
                        output += '<li><a>' + val.term + '</a></li>';
                    });

                    output += '</ul>';
                    $('.search-results').html(output);
            }
        }); // JSON request
    }
}); // data bind

Answer 2

从您的代码来看可以使用，但是当第一个请求之后第二个请求完成时会发生什么？例如先发送"ab"，然后再发送"abc"，第二个结果将被第一个替换。您可以在开始第二个连接之前使用 abort() 中止第一个连接。

if(ajaxRequest){ajaxRequest.abort();}

ajaxRequest = $.ajax({
    url: '...',
    success: function(){
        /* ... */
    }
});

当搜索字段为空时取消所有 ajax 请求

cancel all ajax request when search field is empty

javascript

ajax

jquery

xmlhttprequest