Question

我正在建立一个网站的实时搜索，该网站将根据用户输入的内容返回结果。我只希望在用户输入完成后发送请求。

我尝试了一些使用定时器的实现，甚至是来自underscore.js的debounce方法，但我似乎总是得到类似的结果。

在我输入时，请求会延迟，直到我完成输入。但是它似乎解雇了所有输入，就好像它们排队一样。例如，如果我输入“自行车”，结果会像：

b

bi

bik

bikes

因此，您可以获得搜索结果流。

这是我使用下划线js的当前实现

$('#search_term').on('keyup', _.debounce(function (e) {

       $.ajax({
            type: "GET",
             url: "quicksearch.php",
            data: { search_term:$('#search_term').val()},
            success: function(msg){
              $('#quick_search_results').html(msg).slideDown();
            }
    });

}, 100));

有人有什么想法吗？

Answer 1

也许您的用户输入速度不够快。将wait函数的_.debounce参数设置为长于示例中的100毫秒:(请参阅规格：_.debounce(function, wait, [immediate])。

$('#search_term').on('keyup', _.debounce(function (e) {
   $.ajax({
        type: "GET",
        url: "quicksearch.php",
        data: { search_term:$('#search_term').val()},
        success: function(msg){$('#quick_search_results').html(msg).slideDown();}
   });
}, 300)); // < try 300 rather than 100

Answer 2

您可以通过设置 setTimeout 来实现此目的，以便在经过特定时间后对输入上发生的每个更改进行 ajax 调用，但不要忘记终止之前的调用。

var debounce;
$('#input').on('input', function (e) {
    clearTimeout(debounce);
    debounce = setTimeout( 
      function () { 
        searchText(e.target.value) 
      }, 1000
    );
});

Jquery ajax搜索辩护

2 个答案: