Ajax-скрипт плохо работает при наборе текста (keyup)

Question

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

Мой 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);
      }
    });
  }
}

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

Есть идеи?

Answer 1

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

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

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