Jquery ajax search debounce

Question

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

我已经尝试了一些使用计时器甚至下划线的去抖动方法的实现.js但我似乎总是得到类似的结果。

当我打字

时，请求会延迟，直到我完成打字。但是，它似乎触发了所有输入，就好像它们已排队一样。例如，如果我输入"自行车"，结果会返回如下：

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

也许您的用户键入速度不够快。在示例中，将_.debounce函数的 wait 参数设置为大于 100ms：（请参阅规格：_.debounce（function， wait， [imquite]）。

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