2

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

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

在我打字时，请求会延迟，直到我完成打字。但随后它似乎会触发所有输入，就好像它们已排队一样。例如，如果我输入“bikes”，结果会返回如下：

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));

有人有想法么？

4

2 回答 2

6

也许您的用户打字速度不够快。将函数的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
于 2013-09-24T16:34:19.800 回答
3

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

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

于 2021-02-25T05:21:23.303 回答