如何解决为自动完成限制 jQuery .load() 函数
当用户使用 jQuery .load() 从 PHP 文件键入时,我使用以下函数获取自动完成建议。
如果用户打字速度非常快,我应该如何限制使用此功能发出的自动完成请求的数量?我对这种事情很陌生。
<script>
function getSuggestions(){
var query = document.getElementsByName("q")[0].value;
$(document).ready(function(){
$("#suggestions").load("https://example.com/autosuggest.php",{
q: query
});
});
}
$(document).ready(function(){
let debounce;
$('.searchBox').on('keydown',function(e){
// get keycode of current keypress event
var code = (e.keyCode || e.which);
// do nothing if it's an arrow key
if(code == 37 || code == 38 || code == 39 || code == 40 || code == 13) {
return;
}
// do normal behaviour for any other key
debounce = setTimeout(() => {
getSuggestions();
},350);
});
$(".searchBox").click(function(){
getSuggestions();
});
});
</script>
<input class="searchBox" type="text" name="q" placeholder="" value="" onkeydown="getSuggestions()">
<div id="suggestions">
</div>
解决方法
一般概念称为“debounce” - 基本上您只需设置超时并等待发出请求,例如 500 毫秒。每次收到输入时,都会清除超时。然后,一旦他们最终停止打字一段时间,就会触发超时。像这样(我只是记录输入,但您可以看到它仅在您停止输入时触发):
$(function() {
let debounce;
$('.searchBox').on('input',function() {
clearTimeout(debounce);
debounce = setTimeout(() => {
const value = $(this).val();
console.log({value});
/* $("#suggestions").load("https://example.com/autocomplete.php",{
q: value
}); */
},500);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="searchBox" type="text" name="q" placeholder="" value="">
<div id="suggestions">
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。