为自动完成限制 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>