Jquery ajax搜索辩护

时间:2013-09-24 16:17:49

标签: jquery ajax livesearch

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

我尝试了一些使用定时器的实现,甚至是来自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));

有人有什么想法吗?

2 个答案:

答案 0 :(得分:4)

也许您的用户输入速度不够快。将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

答案 1 :(得分:0)

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

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