Блог

У меня есть ввод, используемый для поиска. Пользователь начинает печатать, и во время ввода в таблице отображается ряд результатов, связанных с введенной строкой.

Мой HTML:

 <input type="text" id="searchinput" onkeyup="Search()" placeholder="Search...">
  

Моя функция Javascript:

 function Search() {
  var value = $("#searchinput").val().toLowerCase().trim();
  if (value == '') {
    $("div#results").html('');
  } else {
    $.ajax({
      type: 'post',
      url: 'getresults.php',
      data: {
        values: value
      },
      success: function(response) {
        $("div#results").html(response);
      }
    });
  }
}
  

Если пользователь быстро вводит поисковые запросы, пользователь получает желаемые результаты. Если вы вводите медленно, он получает результаты, и через пару секунд он как будто ломается и показывает другие результаты (возможно, от ранее нажатой клавиши?).

Есть идеи?

Вы можете попробовать выполнить деблокирование, это приведет к отправке запроса только после 250 мс бездействия.

 $.debounce(250, function(e) {
    console.log("It works!");
})
  

Вот функция debounce, на которую я ссылался
http://benalman.com/code/projects/jquery-throttle-debounce/jquery.ba-throttle-debounce.js