Improve flexsearch feedback

assets/js/index.js

@@ -117,47 +117,53 @@ Source:
   ;
 
   search.addEventListener('input', show_results, true);
-  suggestions.addEventListener('click', accept_suggestion, true);
 
   function show_results(){
     const maxResult = 5;
+    var searchQuery = this.value;
+    var results = index.search(searchQuery, {limit: maxResult, enrich: true});
 
-    var value = this.value;
-    var results = index.search(value, {limit: maxResult, enrich: true});
+    // flatten results since index.search() returns results for each indexed field
+    const flatResults = new Map(); // keyed by href to dedupe results
+    for (const result of results.flatMap(r => r.result)) {
+      if (flatResults.has(result.doc.href)) continue;
+      flatResults.set(result.doc.href, result.doc);
+    }
 
-    suggestions.classList.remove('d-none');
     suggestions.innerHTML = "";
+    suggestions.classList.remove('d-none');
 
-    //flatSearch now returns results for each index field. create a single list
-    const flatResults = {}; //keyed by href to dedupe results
-    for (const result of results.flatMap(r => r.result)) {
-      flatResults[result.doc.href] = result.doc;
+    // inform user that no results were found
+    if (flatResults.size === 0 && searchQuery) {
+      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 list
-    for(const href in flatResults) {
-        const doc = flatResults[href];
-
+    // construct a list of suggestions
+    for(const [href, doc] of flatResults) {
         const entry = document.createElement('div');
-        entry.innerHTML = '<a href><span></span><span></span></a>';
-
-        entry.querySelector('a').href = href;
-        entry.querySelector('span:first-child').textContent = doc.title;
-        entry.querySelector('span:nth-child(2)').textContent = doc.description;
-
         suggestions.appendChild(entry);
-        if(suggestions.childElementCount == maxResult) break;
-    }
-  }
 
-  function accept_suggestion(){
+        const a = document.createElement('a');
+        a.href = href;
+        entry.appendChild(a);
 
-      while(suggestions.lastChild){
+        const title = document.createElement('span');
+        title.textContent = doc.title;
+        title.classList.add("suggestion__title");
+        a.appendChild(title);
 
-          suggestions.removeChild(suggestions.lastChild);
-      }
+        const description = document.createElement('span');
+        description.textContent = doc.description;
+        description.classList.add("suggestion__description");
+        a.appendChild(description);
 
-      return false;
-  }
+        suggestions.appendChild(entry);
 
+        if(suggestions.childElementCount == maxResult) break;
+    }
+  }
 }());

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 {
@@ -43,12 +47,13 @@
   font-size: $font-size-base;
 }
 
-#suggestions span:first-child {
+.suggestion__title {
   font-weight: $headings-font-weight;
   color: $black;
 }
 
-#suggestions span:nth-child(2) {
+.suggestion__description,
+.suggestion__no-results {
   color: $gray-700;
 }
 
@@ -61,15 +66,15 @@
     display: flex;
   }
 
-  #suggestions span:first-child {
+  .suggestion__title {
     width: 9rem;
     padding-right: 1rem;
     border-right: 1px solid $gray-200;
     display: inline-block;
     text-align: right;
   }
 
-  #suggestions span:nth-child(2) {
+  .suggestion__description {
     width: 19rem;
     padding-left: 1rem;
   }