Question

我有一个ajax搜索框，它会在每个键击中转到服务器并返回搜索结果。当用户快速键入时，我想只搜索最后一个条目而不是每个键击。否则，个别结果会令人烦恼，整个过程都会变慢。

例如：如果用户快速输入“自由女神像”，我不想搜索“sta”，“stat”，“statu”等。

我的jQuery代码的基础是：

$('#searchbox').keyup(function(){
    if (this.value.length > 2) {    
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
        });
    }
});        


<input id="searchbox" />
<div id="gen_results"></div>

Answer 1

使用setTimeout或jQuery的autocomplete plugin

var timer;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
        if (timer){
                clearTimeout(timer);
        }
        timer = setTimeout(function(){
                $.post("remote.php",{'partial':this.value},function(data){
                $("#gen_results").html(data);
                });
        }, 1000);
    }
});

Answer 2

试试这个

var inProgress = false;
$('#searchbox').keyup(function(){
    if (this.value.length > 2 && !inProgress) {    
        inProgress  = true;
        $.post("remote.php",{'partial':this.value},function(data){
            $("#gen_results").html(data);
            inProgress = false;
        });
    }
});

这样你就不必维护一个计时器，如果前一次通话已经完成，那就是另一个通话，那时用户输入了更多的东西。

Answer 3

您需要使用超时，此时间设置为500毫秒，但您可能希望更快。

$('#searchbox').keyup(function(){
  window.clearTimeout(window.timeOutId);
  window.timeOutId = window.setTimeout(function() {
    if (this.value.length > 2) {    
      $.post("remote.php",{'partial':this.value},function(data){
       $("#gen_results").html(data);
      });
    }
  },500); 
});

希望对你有用！

Answer 4

function getResults(value) {
   return function() {
       $.post("remote.php",{'partial':value},function(data){
           $("#gen_results").html(data);
       });
   };
}

var timerId;
$('#searchbox').keyup(function(){
    if (this.value.length > 2) {
          clearTimeout(timerId);
          timerId = setTimout(getResults(this.value), 1000);
    }
});

Answer 5

我曾做过类似的事情。我所做的是每500ms设置一个计时器，当调用计时器时，它会执行AJAX请求。诀窍在于，无论何时用户键入内容，我都会重置计时器。

Answer 6

你可以有一个全局变量来保存最后一次击键的时间戳。调用keyup方法时，请读取时间戳并将其与之前的值进行比较。如果超过某个时间范围，请拨打电话，否则，重置全局值并退出。

Answer 7

不要自己构建，而是查看jQuery Autocomplete插件。

使用此功能，您可以set a delay option，以便请求在按键后等待一段时间。

击键后自动完成等待的延迟（以毫秒为单位）激活自己。零延迟对本地数据有意义（更多响应），但可以为远程数据产生大量的负载反应迟钝。

Javascript jquery - 如何在搜索条目中建立延迟

7 个答案: