Question

我有一个功能，可以根据用户的输入使用Ajax实时获取搜索结果。它检查输入字段的长度是否为1或更大，如果是，则添加“ open”类以显示搜索结果的下拉列表。它还有一个else语句，如果长度为0，它将删除open。这在我的本地主机上工作正常，但是在我的网站上，如果我将退格键保持在两个以上的字符上，它将不会删除open（如果我点击退格键，它将始终有效）。

$(document).ready(function() {
  $("#search").on('input', function() {
    if ($('#search').val().length >= 1) {
      $.ajax({
        type: "POST",
        url: "/url",
        data: {
          "json_str": $('#search').val()
        },
        dataType: "json",
        success: function(data) {
          if (!$("#searchbar").hasClass("open")) {
            $("#searchbar").addClass("open")
          }
          if (data.length == undefined) {
            $('#display').html("No results")
          } else {
            for (var i = 0; i < data.length; i++) {
              console.log(data[i].username)
              $('#display').append("<some html>")
            }
          }
        }
      });
    } else {
      $("#searchbar").removeClass("open")
    }
  });
})

Answer 1

我找到了一种解决方案，如果在响应进入之前进行了新的调用，我现在将中止上一个AJAX调用。

var request = null;
$("#search").on('input', function() {
  if (request){
    request.abort()
}
if ($('#search').val().trim().length >= 1) {
  request = $.ajax({.........

Answer 2

尝试调整输入值

if($('#search').val().trim().length)

保留退格键时，jQuery不会删除类

2 个答案: