我有以下代码,当用户在文本框中键入内容时,我想用它来搜索数据库。下面的代码工作正常,但似乎效率有点低,就好像用户打字速度非常快一样。我可能会进行比必要的更多的搜索。因此,如果用户输入“sailing”,我就会搜索“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();
});
}
它的作用是在 500ms
后通过在#searchString
元素的 .data()
collection 。每次keyup
都会清除该计时器,如果输入了该键,则立即搜索,如果没有在自动搜索之前设置另一个500ms
超时。
关于jquery - 使用 Ajax 和按键优化搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3028704/