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

Question

我正在尝试构建一个实时AJAX搜索框。我使用keyup((函数来触发搜索api，将输入框的当前值作为搜索文本。然而，由于搜索api调用是异步的，因此不能保证最终的api调用将是在之前的api调用之前完成的调用。

例如，如果我在输入框中输入"free"，将有四个api调用，其中"search_text"=f，fr，fre&自由的搜索？search_text=免费调用是否会比搜索更快完成？search_text=freapi调用，即使它后来被激发。如何确保最终api调用的结果(在本例中为搜索？search_text=free(始终呈现在结果页面中？

我看到过一些解决方案，他们建议只对稳定的查询触发请求，即当用户停止键入时(例如200ms左右(。然而，我认为尽管如此，仍然不能保证在启动两个连续的搜索查询时(比如延迟>=200ms(，第二个查询的结果总是最后完成。构建这个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
}