Jquery 实时搜索，一旦从输入中删除内容，则不会退出 if 语句

Question

我目前正在进行最终的团队项目，用于我作为Web开发人员的培训。我确实为我们的应用程序编写了一个实时搜索代码，它按预期工作，直到我从输入中删除内容为止。代码有时会保留在 if 语句中以删除追加。我不明白为什么。有人知道吗？

这是我的代码：

$(function(){
 var check = 0;
 $("#getQuestions").on("keyup", function(){
    check++;
    var inputLength = $("#getQuestions").val().length;
    if (check === 3 || inputLength === 0) {
        $(".liveSearch").remove();
    }
    if (inputLength >= 1) {
        if(check === 3 ){
            $.ajax({
                type: "POST",
                url: "/getQuestions",
                data: {"question": $("#getQuestions").val()}
            }).done(function(response){
                for (var i = 0; i < response.length; i++) {
                    var id = response[i].id;
                    var title = response[i].title;
                    $("#listQuestions").append('<div class="liveSearch"><a href="/question?id='+id +'""' + '>' + title + '</a></div>' );
                }
                check = 0;
            });
        }
    }

 });

});

我很感激你的帮助。

有好的一天。

Answer 1

您使用计数变量似乎使事情过于复杂。现在，您的 ajax 调用仅每 3 次按键触发一次(这意味着例如按 shift 3 次将触发它或按住字母只会将计数增加 1 次的问题(。

改用按键和计时器，你将得到以下代码：

$(function(){
  var timer;
  $("#getQuestions").on("keypress", function(){
    if ($("#getQuestions").val().length == 0) {
      $(".liveSearch").remove();
    }
    if ($("#getQuestions").val().length > 0) {
      clearTimeout(timer);
      timer = setTimeout(function() {
        $(".liveSearch").remove();
        $.ajax({
          type: "POST",
          url: "/getQuestions",
          data: {"question": $("#getQuestions").val()}
        }).done(function(response){
          for (var i = 0; i < response.length; i++) {
            $("#listQuestions").append('<div class="liveSearch"><a href="/question?id=' + response[i].id + '">' + response[i].title + '</a></div>');
          }
        });
      }, 1000);
    }
  });
});