我正在建立一个网站的实时搜索,该网站将根据用户输入的内容返回结果。我只希望在用户输入完成后发送请求。
我尝试了一些使用定时器的实现,甚至是来自underscore.js的debounce方法,但我似乎总是得到类似的结果。
在我输入时,请求会延迟,直到我完成输入。但是它似乎解雇了所有输入,就好像它们排队一样。例如,如果我输入“自行车”,结果会像:
b
bi
bik
bikes
因此,您可以获得搜索结果流。
这是我使用下划线js的当前实现
$('#search_term').on('keyup', _.debounce(function (e) {
$.ajax({
type: "GET",
url: "quicksearch.php",
data: { search_term:$('#search_term').val()},
success: function(msg){
$('#quick_search_results').html(msg).slideDown();
}
});
}, 100));
有人有什么想法吗?
答案 0 :(得分:4)
也许您的用户输入速度不够快。将wait
函数的_.debounce
参数设置为长于示例中的100毫秒:(请参阅规格:_.debounce(function, wait, [immediate])。
$('#search_term').on('keyup', _.debounce(function (e) {
$.ajax({
type: "GET",
url: "quicksearch.php",
data: { search_term:$('#search_term').val()},
success: function(msg){$('#quick_search_results').html(msg).slideDown();}
});
}, 300)); // < try 300 rather than 100
答案 1 :(得分:0)
您可以通过设置 setTimeout 来实现此目的,以便在经过特定时间后对输入上发生的每个更改进行 ajax 调用,但不要忘记终止之前的调用。
var debounce;
$('#input').on('input', function (e) {
clearTimeout(debounce);
debounce = setTimeout(
function () {
searchText(e.target.value)
}, 1000
);
});