Javascript中的即时搜索功能答案

【问题标题】：Instant search function in JavascriptJavascript中的即时搜索功能
【发布时间】：2011-03-21 21:29:47
【问题描述】：

我将以下 javascript 用于我的即时搜索功能（以检测访问者何时停止写作，因此该功能不会在每个按键上运行）。

它可以工作，但延迟超过 1000 毫秒。即使我将其设置为 200 毫秒，在即时搜索功能运行之前也会有 1-2 秒的延迟。

是否有更好/更快的方法来检测访问者何时停止输入输入（如果有任何不同，我只需要在 Internet Explorer 中使用它）。

$(document).ready(function(){

var delay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();

$('input').keyup(function() {
delay(function(){
//instant search function here
}, 1000 );
});

});

新想法：当我想到它时，问题是当函数运行时我无法继续在输入字段中写入。任何解决方案，我都不需要任何延迟功能。

【问题讨论】：

标签： javascript input delay onkeyup

【解决方案1】：

function instantSearch(){ ... }

var timer;
$('input').keyup(function(){
   timer && clearTimeout(timer);
   timer = setTimeout(instantSearch, 200);
});

【讨论】：

太漂亮了。我什至不在乎它的性能；）谢谢！
也许效果好一点，说不上来。在上面的例子中，你拼错了 keyUp。你知道有没有办法让访问者在即时搜索功能运行的情况下继续在输入中书写？
不太确定我是否关注您...他们为什么不能继续输入？每次他们停止输入至少 0.2 秒时，您的 InstantSearch 功能都会触发，因此它可能会触发多次。您的搜索应该阻止它的唯一原因是如果您正在触发同步 AJAX 调用，在这种情况下，使其 ASYNC 应该可以解决您的问题。还有一件事，您应该将实际搜索值绑定到 AJAX 回调，以便您知道您正在显示正确事物的结果。例如如果他们键入“test”“ing”，您可能会触发两个 AJAX 调用，但不想显示第一个调用的结果。
效果很好。函数拼写错误，应该是keyup。

【解决方案2】：

您的即时搜索功能是否发出 AJAX 请求以返回结果？这可能是将延迟设置为 200 毫秒和在 1-2 秒后回复您的响应之间的区别。

【讨论】：

感谢您的回答。不，我没有发出 ajax 请求。但我明白你的意思（当然你是对的）。尽管如此，如果我用一个简单的警报功能替换搜索功能，也会有类似的行为。当我想到它时，问题是当函数运行时我无法继续在输入字段中写入。任何解决方案，我都不需要任何延迟功能。

【解决方案3】：

如果您使用 keyup 事件，则无需指定延迟，除非每秒查询数或类似限制有特定限制。

这里有一个相当简洁的演练：http://blog.comperiosearch.com/2012/06/make-an-instant-search-application-using-json-ajax-and-jquery/

【讨论】：