如何确保在实时 Ajax 搜索中获取最新的搜索结果

Question

我正在尝试构建一个实时 AJAX 搜索框。我正在使用 keyup() 函数触发搜索 api，并将输入框的当前值作为搜索文本。但是，由于搜索 api 调用是异步的，因此无法保证最终的 api 调用会被渲染，因为它可能会在之前的 api 调用之前完成。

例如，如果我在输入框中输入"free"，将有四个api调用，"search_text" = f,fr,fre & free。 search?search_text=free 调用完成速度可能比 search?search_text=fre api打电话，即使后来被解雇了。我如何确保最终 api 调用（在本例中为搜索？search_text=free）的结果始终呈现在结果页面中？

我见过一些解决方案，他们建议仅针对 稳定的 查询触发请求，即当用户停止输入时（比如 200 毫秒左右）。然而，我认为尽管仍然不能保证在触发 2 个连续的搜索查询时（比如时间延迟 >=200ms），第二个查询的结果 always 最后完成。构建此 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
}

Answer 1

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
}

如何确保在实时 Ajax 搜索中获取最新的搜索结果

How to ensure latest search results are fetched in a live Ajax search

javascript

jquery

ajax

livesearch