If flexsearch returns no results, display message

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');

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;
 }