If flexsearch returns no results, display message

Tina0330 · Oct 15, 2021 · af6c51f · af6c51f
1 parent 1710b80
commit af6c51f
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/assets/js/index.js b/assets/js/index.js
@@ -133,6 +133,15 @@ Source:
     suggestions.innerHTML = "";
     suggestions.classList.remove('d-none');
 
+    // inform user that no results were found
+    if (flatResults.size === 0) {
+      const noResultsMessage = document.createElement('div')
+      noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
+      noResultsMessage.classList.add("suggestion__no-results");
+      suggestions.appendChild(noResultsMessage);
+      return;
+    }
+
     // construct a list of suggestions
     for(const [href, doc] of flatResults) {
         const entry = document.createElement('div');

diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss
@@ -10,11 +10,15 @@
   z-index: $zindex-dropdown;
 }
 
+#suggestions a,
+.suggestion__no-results {
+  padding: 0.75rem;
+  margin: 0 0.5rem;
+}
+
 #suggestions a {
   display: block;
   text-decoration: none;
-  padding: 0.75rem;
-  margin: 0 0.5rem;
 }
 
 #suggestions a:focus {
@@ -48,7 +52,8 @@
   color: $black;
 }
 
-.suggestion__description {
+.suggestion__description,
+.suggestion__no-results {
   color: $gray-700;
 }