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

时间:2016-04-29 10:14:40

标签: javascript jquery ajax xmlhttprequest

如果搜索字段为空且搜索字符长度为<

则取消所有Ajax请求。 3

<tr ng-repeat="contract in customerContracts[0].contracts">
                  <td>{{contract.contractid}}</td>
                  <td>{{contract.contractStatus}}</td>
                  <td>{{contract.bandwidth}}</td>
                  <td>{{contract["contract-start-time"]}}</td>
                          <td>{{contract["contract-end-time"]}}</td>
                  <td>{{contract["renewal-option"]}}</td>
                  <td>{{contract.price}}</td>
                  <td><span class="icon_delete" ng-click="deleteInformation()"></span></td>
                </tr>

2 个答案:

答案 0 :(得分:1)

从您的代码中可以使用,但第一次请求后第二次请求完成后会发生什么?例如,先发送“ab”并稍后发送“abc”,第二个结果将替换为第一个。您可以使用abort()在启动第二个连接之前中止第一个连接。

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

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

答案 1 :(得分:0)

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

$('#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