Jquery не удаляет класс при удержании Backspace

Question

У меня есть функция, которая использует Ajax для получения результатов поиска в режиме реального времени, когда пользователь вводит. У него есть проверка, если длина поля ввода равна 1 или более, и если это так, то он добавляет класс «open» для отображения выпадающего списка результатов поиска. Он также имеет оператор else, где, если длина равна 0, он удаляет open. Это прекрасно работает на моем локальном хосте, но на моем веб-сайте, если я удерживаю клавишу Backspace более чем на двух символах, она не удаляется открытой (если я нажимаю клавишу Backspace, она всегда работает).

$(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)