diff options
| -rw-r--r-- | src/components/SearchModal.vue | 30 |
1 files changed, 12 insertions, 18 deletions
diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue index 210c87c..35efb55 100644 --- a/src/components/SearchModal.vue +++ b/src/components/SearchModal.vue @@ -15,9 +15,8 @@ export default defineComponent({ searchSuggs: [] as SearchSugg[], searchHasMoreSuggs: false, focusedSuggIdx: null as null | number, // Denotes a search-suggestion selected using the arrow keys - pendingSearchSuggReq: 0, // Set via setTimeout() upon a search-suggestion request - // Used to avoid sending many requests when search input is quickly changed multiple times - lastSuggReqId: 0, // Used to prevent late search-suggestion server-responses from taking effect + pendingSuggReq: 0, // Set via setTimeout() upon a search-suggestion request + pendingSuggReqUrl: null, // Used by a pendingSuggReq callback to use the latest user input }; }, props: { @@ -96,25 +95,20 @@ export default defineComponent({ url.pathname = '/data/search'; url.search = '?name=' + encodeURIComponent(input.value); url.search += (this.uiOpts.useReducedTree ? '&tree=reduced' : ''); - this.lastSuggReqId += 1; - let suggsId = this.lastSuggReqId; - let reqDelay = 0; - if (this.pendingSearchSuggReq != 0){ - clearTimeout(this.pendingSearchSuggReq); - reqDelay = 200; + this.pendingSuggReqUrl = url.toString(); + if (this.pendingSuggReq != 0){ + return; } - this.pendingSearchSuggReq = setTimeout(() => - fetch(url.toString()) + this.pendingSuggReq = setTimeout(() => + fetch(this.pendingSuggReqUrl) .then(response => response.json()) .then((results: SearchSuggResponse) => { - if (this.lastSuggReqId == suggsId){ - this.searchSuggs = results[0]; - this.searchHasMoreSuggs = results[1]; - this.focusedSuggIdx = null; - this.pendingSearchSuggReq = 0; - } + this.searchSuggs = results[0]; + this.searchHasMoreSuggs = results[1]; + this.focusedSuggIdx = null; + this.pendingSuggReq = 0; }), - reqDelay + 200 ); }, onDownKey(){ |