Merge pull request #517 from schnerring/improve-flexsearch-feedback

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});
-
-    suggestions.classList.remove('d-none');
-    suggestions.innerHTML = "";
-
-    //flatSearch now returns results for each index field. create a single list
-    const flatResults = {}; //keyed by href to dedupe results
+    // 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)) {
-      flatResults[result.doc.href] = result.doc;
+      if (flatResults.has(result.doc.href)) continue;
+      flatResults.set(result.doc.href, result.doc);
     }
 
-    //construct a list of suggestions list
-    for(const href in flatResults) {
-        const doc = flatResults[href];
+    suggestions.innerHTML = "";
+    suggestions.classList.remove('d-none');
 
+    // 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
+    for(const [href, doc] of flatResults) {
         const entry = document.createElement('div');
-        entry.innerHTML = '<a href><span></span><span></span></a>';
+        suggestions.appendChild(entry);
 
-        entry.querySelector('a').href = href;
-        entry.querySelector('span:first-child').textContent = doc.title;
-        entry.querySelector('span:nth-child(2)').textContent = doc.description;
+        const a = document.createElement('a');
+        a.href = href;
+        entry.appendChild(a);
+
+        const title = document.createElement('span');
+        title.textContent = doc.title;
+        title.classList.add("suggestion__title");
+        a.appendChild(title);
+
+        const description = document.createElement('span');
+        description.textContent = doc.description;
+        description.classList.add("suggestion__description");
+        a.appendChild(description);
 
         suggestions.appendChild(entry);
+
         if(suggestions.childElementCount == maxResult) break;
     }
   }
-
-  function accept_suggestion(){
-
-      while(suggestions.lastChild){
-
-          suggestions.removeChild(suggestions.lastChild);
-      }
-
-      return false;
-  }
-
 }());

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,7 +66,7 @@
     display: flex;
   }
 
-  #suggestions span:first-child {
+  .suggestion__title {
     width: 9rem;
     padding-right: 1rem;
     border-right: 1px solid $gray-200;
@@ -69,7 +74,7 @@
     text-align: right;
   }
 
-  #suggestions span:nth-child(2) {
+  .suggestion__description {
     width: 19rem;
     padding-left: 1rem;
   }