client: search input event tweaks

1 files changed, 47 insertions, 1 deletions

diff --git a/src/static/js/client.js b/src/static/js/client.js
index 93cbb902..8a1ee021 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3465,6 +3465,14 @@ const sidebarSearchInfo = initInfo('sidebarSearchInfo', {
 
   resultsContainer: null,
   results: null,
+
+  state: {
+    stoppedTypingTimeout: null,
+  },
+
+  settings: {
+    stoppedTyingDelay: 800,
+  },
 });
 
 function getSidebarSearchReferences() {
@@ -3506,7 +3514,27 @@ function addSidebarSearchListeners() {
   if (!info.searchInput) return;
 
   info.searchInput.addEventListener('change', domEvent => {
-    activateSidebarSearch(info.searchInput.value);
+    if (info.searchInput.value) {
+      activateSidebarSearch(info.searchInput.value);
+    }
+  });
+
+  info.searchInput.addEventListener('input', domEvent => {
+    const {settings, state} = info;
+
+    if (!info.searchInput.value) {
+      clearSidebarSearch();
+      return;
+    }
+
+    if (state.stoppedTypingTimeout) {
+      clearTimeout(state.stoppedTypingTimeout);
+    }
+
+    state.stoppedTypingTimeout =
+      setTimeout(() => {
+        activateSidebarSearch(info.searchInput.value);
+      }, settings.stoppedTyingDelay);
   });
 }
 
@@ -3514,6 +3542,14 @@ function activateSidebarSearch(query) {
   showSidebarSearchResults(searchAll(query, {enrich: true}));
 }
 
+function clearSidebarSearch() {
+  const info = sidebarSearchInfo;
+
+  info.searchInput.value = '';
+
+  hideSidebarSearchResults();
+}
+
 function showSidebarSearchResults(results) {
   const info = sidebarSearchInfo;
 
@@ -3596,6 +3632,16 @@ function showSidebarSearchResults(results) {
   }
 }
 
+function hideSidebarSearchResults() {
+  const info = sidebarSearchInfo;
+
+  cssProp(info.resultsContainer, 'display', 'none');
+
+  while (info.results.firstChild) {
+    info.results.firstChild.remove();
+  }
+}
+
 clientSteps.getPageReferences.push(getSidebarSearchReferences);
 clientSteps.mutatePageContent.push(mutateSidebarSearchContent);
 clientSteps.addPageListeners.push(addSidebarSearchListeners);