在多个keydown事件后一秒钟执行AJAX搜索

Question

所以我用jquery做了一个自动完成。Ajax用于从远程位置获取大量xml文件。如果我搜索ex.“两个半男人”，它会用ajax进行大约16次查询（除了3次之外，每一次输入的字母，先看代码）。

我希望它在用户按下最后一个键后一秒钟执行Ajax请求，因此它将执行一个查询而不是16个查询。

因此，如果用户在上次按键事件后 1 秒之前按另一个键，则它尚不会执行查询。

<script>
    $(document).ready(function(){
        $('#tv_search').keydown(function(){
            var search = $(this).val();
            if(search.length >= 3)
            {
                $.ajax({
                  type: "GET",
                  url: "search.php",
                  data: {show : search, key : '890k4900k0ll' }
                }).done(function(msg){
                    $('#t').html(msg);
                });
            }
        });
    });
</script>

Search for series: <input type='text' name='tv_search' id='tv_search'>

有什么想法吗？

Answer 1

我有一个解决方案，可以让您延迟调用的任何方法，避免重复调用，这根本不会被使用！

https://stackoverflow.com/a/30503848/1834212

Answer 2

要避免在每次按键时生成多个AJAX请求，请尝试使用＜code＞setTimeout（）setTimeout（）方法应该包含AJAX请求，该请求在用户按键四分之一秒（250毫秒）后执行。

如果请求可用，我也abort（）请求。

var timeOut = null,
    myXHR = null;
$(document).ready(function(){
    $('#tv_search').keydown(function(){
        // It will clear the setTimeOut activity if valid.
        if(timeOut) clearTimeout(timeOut);

        var search = $(this).val();
        if(search.length >= 3)
        {
            timeOut = setTimeout(function(){
              // Cancel the last request if valid
              if(myXHR) myXHR.abort();

              myXHR = $.ajax({
                type: "GET",
                url: "search.php",
                data: {show : search, key : '890k4900k0ll' }
              }).done(function(msg){
                  $('#t').html(msg);
              });
            }, 250);// wait for quarter second.
        }
    });
});

Answer 3

你可以使用超时，并在每次按键时清除它:

$(document).ready(function() {
    $('#tv_search').on('keyup', function() {
        clearTimeout($(this).data('timer'));
        var search = this.value;
        if (search.length >= 3) {
            $(this).data('timer', setTimeout(function() {
                $.ajax({
                    type: "GET",
                    url: "search.php",
                    data: {
                        show: search,
                        key: '890k4900k0ll'
                    }
                }).done(function(msg) {
                    $('#t').html(msg);
                });
            }, 1000));
        }
    });
});​