jQuery - 搜索文本输入 - 延迟直到输入完整术语

Question

我有以下代码，它检测输入到 #search-box 字段中的任何文本，然后立即运行搜索(如果大于 2 个字符):

$('#search-box').on('input', function() { 

    var term = $(this).val();
    if (term.length > 2) {
      //execute search and display results
    }

});

这看起来不太漂亮，例如，就像您输入 dollar 一样，在“doll”之后会出现一堆娃娃，一旦输入，这些娃娃就会被美元替换输入了dolla。这可能会在一瞬间发生。

我想做的是确定用户是否完成了搜索词。是否可以等待一两秒再进行搜索？如果在等待期间用户输入另一个字母，它会重置时钟吗？

Answer 1

您必须使用setTimeout()来等待输入后。

var tim = '';
$('#search-box').on('input', function() { 
    clearTimeout(tim);
    tim = setTimeout(my_func, 2000); //2000 means 2 seconds; 
});

function my_func() {
    var term = $(this).val();
    if (term.length > 2) {
        //execute search and display results
    }
}

秒的单位是 ms，因此您也可以将 1500 设置为一秒半。

clearTimeout 用于销毁 tim 中的值。在 clearTimeout(tim) 之后，tim 变为零，然后在增加/减少 #search-box 长度后开始。