有没有一种方法可以从实时功能搜索框的调用函数中取消ajax搜索？

Question

我有一个搜索框，服务器响应后应立即显示相关结果，但是如果没有要搜索的内容，则显示基本页面结果。我在使用此功能的时间方面遇到了问题。

问题：有时，如果请求返回响应的时间太长，它将在搜索框应显示其他结果之后显示这些结果，例如：用户搜索“ 12345”，并且在搜索结束之前，用户更新了搜索结果为“ 54321”，并且该搜索在原始搜索之前完成，但是原始搜索的结果将成为原始搜索的结果。

理想情况下，它将取消所有不完整的搜索，仅显示当前查询的结果。

searchUsers() {
        var self = this;
        if(this.query.length > 1) {
            $.ajax({
                url: `/api/Search?q=${this.query}`,
                method: 'GET',
                success: function (data) {
                    self.conversations = data.data; //updates vue component data() to display results
                },
                error: function (error) {
                    console.log(error);
                }
            });
        } else {
            self.getAllThreads(); //reset to appearance from page load
        }
    }

上面是我处理搜索的功能，下面是组件那部分的相关标记。

<input id="user-search" 
                        v-model="query"
                        type="search" 
                        class="msg-overlay-list-bubble-search"
                        placeholder="search users"
                        v-on:keyup="searchUsers">

我不确定哪种方法最适合解决此问题。我不是在寻找答案，只是在寻找可能使我朝正确方向迈进的东西。 谢谢。