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

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