From 882cd54fa955b4fada612574ef13bdab1608f1de Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 1 May 2022 17:09:04 +1000
Subject: Add fuzzy-search via sqlite extension spellfix1

Also add delay between client search-suggestion requests when search
input undergoes multiple quick changes
---
 src/components/SearchModal.vue | 25 ++++++++++++++++---------
 1 file changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/components')

diff --git a/src/components/SearchModal.vue b/src/components/SearchModal.vue
index 6d23dc2..d658fac 100644
--- a/src/components/SearchModal.vue
+++ b/src/components/SearchModal.vue
@@ -14,6 +14,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
 		};
 	},
@@ -82,21 +84,26 @@ export default defineComponent({
 				this.focusedSuggIdx = null;
 				return;
 			}
+			// Clear any pending request
+			clearTimeout(this.pendingSearchSuggReq);
 			// Ask server for search-suggestions
 			let url = new URL(window.location.href);
 			url.pathname = '/data/search';
 			url.search = '?name=' + encodeURIComponent(input.value);
 			this.lastSuggReqId += 1;
 			let suggsId = this.lastSuggReqId;
-			fetch(url.toString())
-				.then(response => response.json())
-				.then((results: SearchSuggResponse) => {
-					if (this.lastSuggReqId == suggsId){
-						this.searchSuggs = results[0];
-						this.searchHasMoreSuggs = results[1];
-						this.focusedSuggIdx = null;
-					}
-				})
+			this.pendingSearchSuggReq = setTimeout(() =>
+				fetch(url.toString())
+					.then(response => response.json())
+					.then((results: SearchSuggResponse) => {
+						if (this.lastSuggReqId == suggsId){
+							this.searchSuggs = results[0];
+							this.searchHasMoreSuggs = results[1];
+							this.focusedSuggIdx = null;
+						}
+					}),
+				500
+			);
 		},
 		onDownKey(){
 			// Select next search-suggestion, if any
-- 
cgit v1.2.3