Как обеспечить получение последних результатов поиска в режиме реального времени поиска Ajax - PullRequest
Новая
       34

Как обеспечить получение последних результатов поиска в режиме реального времени поиска Ajax

0 голосов
/ 21 марта 2020

Я пытаюсь построить окно поиска в реальном времени AJAX. Я использую функцию keyup () для запуска API поиска с текущим значением поля ввода в качестве текста поиска. Однако, поскольку поисковые API-вызовы являются асинхронными, нет гарантии, что окончательный API-вызов будет отображаться так, как он может завершиться sh до предыдущих API-вызовов.

Например, если я введу " free "в поле ввода будет четыре вызова API с" search_text "= f, fr, fre & free. Поиск? Search_text = бесплатный вызов может закончиться sh быстрее, чем поиск? Search_text = fre вызов API, даже если он был запущен позже. Как мне убедиться, что результаты последнего вызова API (в данном случае search? Search_text = free ) всегда отображаются на странице результатов?

Я видел решения, в которых они советуют запускать запрос только для стабильного запроса, т.е. когда пользователь прекратил печатать (скажем, 200 мс или около того). Однако я думаю, что, несмотря на это, еще нет гарантии, что при запуске 2 последовательных поисковых запросов (скажем, с задержкой> = 200 мс) результаты второго будут всегда завершаться последними. Каков наилучший способ построить этот ajax живой поиск? 

<input type="text" id="search" name="search" class="form-control input-lg" />

$('#search').keyup(function() {
  $.ajax({
      type: "POST",
      url: "/search/",
      data: {
        'search_text' : $('#search').val(),
      },
      success: searchSuccess,
    });
  });

function searchSuccess(data) {
  // logic to render search results to web page
}

1 Ответ

1 голос
/ 21 марта 2020 
let counter = 0; // ADDING A COUNTER
$('#search').keyup(function() {
// INCREASING THE COUNTER VALUE AND STORE IT INTO A LOCAL VARIABLE
  let cur = ++counter; 
  $.ajax({
      type: "POST",
      url: "/search/",
      data: {
        'search_text' : $('#search').val(),
      },
      success: data => {
// CHECKING IF THE LOCAL VARIABLE AND COUNTER ARE EQUAL
        if(cur == counter){
// IF EQUAL: IT IS THE LAST QUERY
          searchSuccess(data);
        } else {
// IF NOT: DON'T DO ANYTHING
          return false;
        }
       }
    });
  });

function searchSuccess(data) {
  // logic to render search results to web page
}
...