Задержка при передаче данных AJAX в PHP

Question

Я пытаюсь создать поиск ajax. Я попытался создать php с быстрой загрузкой и другую страницу php, содержащую форму поиска.

Форма поиска:

<input id="searchtop" type="text" class="search-field" onkeyup="searchNotes()">

Пример PHP-ссылки для поиска:

/searchform/?key=string

Функция searchNotes() JS:

function debounce(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this,
      args = arguments;
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      timeout = null;
      if (!immediate) {
        func.apply(context, args);
      }
    }, wait);
    if (callNow) func.apply(context, args);
  }
}

function searchNotes() {

  var searcher = document.getElementById("searchtop").value;
if (searcher.length > 3) {
 currentRequest = jQuery.ajax({
     type: 'GET',
     url: '/searchform/?key='+searcher,
                   cache: false,

     success: function(data) {
             $("#datafetch").html(data);
     }
 })};

}

var debounced = debounce(searchNotes, 50);

window.addEventListener('keyup', debounced);

проблема: когда я пытаюсь набрать, например, «smooth» на быстром вводе, сначала он работает нормально, но затем загружаетсявсе "smoot", "smoo" и т. д. по основному "smooth" результату и "smooth" удаляется jQuery('#datafetch').html(''); другими неполными строками.

Я хотел найти способ получить последнюю строкуэто вводится на вводе без проблемы.

Answer 1

ОК, это был мой способ исправить это:

var searchInput = $("#searchtop");
var searchQueryDisplay = $("#datafetch");

var showSearchQuery = function() {

      var searcher = document.getElementById("searchtop").value;
    if (searcher.length > 3) {

     currentRequest = jQuery.ajax({
         type: 'GET',
         url: '/searchform/?key='+searcher,
                       cache: false,

         success: function(data) {
                 $("#datafetch").html(data);
         }
     })};

    }


var debounceTimeout = null;
searchInput.on('change keyup', function(event){
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(showSearchQuery, 300);
});