Question

I have an ajax search box that goes to the server on every key stroke and returns the result of the search. When the user types quickly, I want to search only on the last entry and not on every key stroke. Otherwise the individual results flash annoyingly and the whole process is slowed.

For example: if the user types "statue of liberty" quickly, I don t want to search on "sta", "stat", "statu" etc.

the basics of my jQuery code is:

$( #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

use setTimeout or jQuery s 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

You need to use a timeout, this one is set to 500ms, but you might want to go quicker.

$( #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 3

引言

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

我曾经做过类似的事情。我每次500万米都设定了时间,当叫作时间者时,日本宇宙航空研究开发机构的请求就是这样。骗局是,每当用户打什么时,我会重新打造时间。

Answer 6

你们可以拥有一个全球变量,掌握着最后一个重要的中风。当关键方法被称作时,需要时间阅读,并与以前的数值相比较。如果时间已经过一段时间,你就会发出呼吁,否则就会重新确定全球价值和撤出。

Answer 7

Instead of building this yourself have a look at the jQuery Autocomplete plugin.

利用你可以,以便在关键中风后等待一段时间的请求。

The delay in milliseconds the Autocomplete waits after a keystroke to activate itself. A zero-delay makes sense for local data (more responsive), but can produce a lot of load for remote data, while being less responsive.

友情链接