我有以下代码，因为我想搜索数据库，因为用户正在输入到文本框。这个代码下面的工作正常，但它似乎有点低效率，如果一个用户打字真的很快，我有可能做更多的搜索比必要。因此，如果用户正在输入“帆船”
我在搜索“sail”，“saili”，“sailin”和“sailing”
我想看看是否有一种方法来检测按键之间的任何特定时间，所以只搜索如果用户停止输入500毫秒或类似这样。
有这样的东西的最佳实践吗？
$('#searchString').keypress(function(e) {
if (e.keyCode == 13) {
var url = '/Tracker/Search/' + $("#searchString").val();
$.get(url,function(data) {
$('div#results').html(data);
$('#results').show();
});
}
else {
var existingString = $("#searchString").val();
if (existingString.length > 2) {
var url = '/Tracker/Search/' + existingString;
$.get(url,function(data) {
$('div#results').html(data);
$('#results').show();
});
}
}
解决方法
你可以这样做：
$('#searchString').keyup(function(e) {
clearTimeout($.data(this,'timer'));
if (e.keyCode == 13)
search(true);
else
$(this).data('timer',setTimeout(search,500));
});
function search(force) {
var existingString = $("#searchString").val();
if (!force && existingString.length < 3) return; //wasn't enter,not > 2 char
$.get('/Tracker/Search/' + existingString,function(data) {
$('div#results').html(data);
$('#results').show();
});
}
这是做什么是通过在#searchString元素的.data() collection上存储一个定时器500ms后执行搜索(在keyup，比这些情况下优于keypress)。每个keyup它清除该定时器，如果键入，立即搜索，如果它在自动搜索之前未设置另一个500毫秒超时。