jQuery 搜索栏实时更新

Question

我正在尝试创建一个搜索栏来更新在数据库中找到的项目列表，这些项目喜欢此搜索栏的值。这是我的酒吧代码：

$(document).ready(function(){
    $('#search').keyup(function () {
        $('#results').html('');

        let searchValue = $(this).val();

        if(searchValue !== ''){
            $.ajax({
                type: 'GET',
                url: '../controller/searchItem.php',
                data: 'data=' + encodeURIComponent(searchValue),
                success: function(data){
                    if(data !== ""){
                        $('#results').append(data);
                    }else{
                        document.getElementById('results').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'><p>Oups, ce que vous cherchez n'existe pas encore !</p></div>";
                    }
                }
            })
        }
    })
});

但实际上当我使用 Shift+Letter 时，由于“.keyup”，它发送了两个请求。我只想使用此组合发送一个请求，而不必失去对搜索栏的关注或不必按 Enter（换句话说，动态）。

有人对我的问题有什么建议吗？非常感谢！

Answer 1

在 keyup 上发送 ajax 请求并不是很聪明。为什么？因为我可以向键盘发送 1000 次垃圾邮件，它会发送 1000 个请求。您可能想要做的是在用户完成输入后发送请求。

var typingTimer;
var doneTypingInterval = 1000; // Trigger the request 1 second/1000 ms after user done typing.
var input = $('#input'); // Your input

input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

input.on('keydown', function () {
  clearTimeout(typingTimer);
});

// user is done, send ajax request.
function doneTyping () {
   let searchValue = $('#input').val();

   if(searchValue !== ''){
            $.ajax({
                type: 'GET',
                url: '../controller/searchItem.php',
                data: 'data=' + encodeURIComponent(searchValue),
                success: function(data){
                    if(data !== ""){
                        $('#results').append(data);
                    }else{
                        document.getElementById('results').innerHTML = "<div style='font-size: 20px; text-align: center; margin-top: 10px'><p>Oups, ce que vous cherchez n'existe pas encore !</p></div>";
                    }
                }
            })
        }
}

jQuery 搜索栏实时更新

jQuery search bar live update

javascript

jquery

jquery-events