From 7debd0ae6256c89b3c76937d52e802af28562624 Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:12:42 +0200
Subject: [PATCH 1/6] Refactor show_results (flexsearch) to be more descriptive

---
 assets/js/index.js | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 7bfa6c56c..058a10762 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -121,31 +121,39 @@ Source:
 
   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 = {}; // keyed by href to dedupe results
     for (const result of results.flatMap(r => r.result)) {
       flatResults[result.doc.href] = result.doc;
     }
 
-    //construct a list of suggestions list
+    suggestions.innerHTML = "";
+    suggestions.classList.remove('d-none');
+
+    // construct a list of suggestions
     for(const href in flatResults) {
         const doc = flatResults[href];
 
         const entry = document.createElement('div');
-        entry.innerHTML = '<a href><span></span><span></span></a>';
+        suggestions.appendChild(entry);
+
+        const a = document.createElement('a');
+        a.href = href;
+        entry.appendChild(a);
 
-        entry.querySelector('a').href = href;
-        entry.querySelector('span:first-child').textContent = doc.title;
-        entry.querySelector('span:nth-child(2)').textContent = doc.description;
+        const title = document.createElement('span');
+        title.textContent = doc.title;
+        a.appendChild(title);
+
+        const description = document.createElement('span');
+        description.textContent = doc.description;
+        a.appendChild(description);
 
         suggestions.appendChild(entry);
+
         if(suggestions.childElementCount == maxResult) break;
     }
   }

From a3a636581738b1110d7c518f7f398f21a5e667f4 Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:13:18 +0200
Subject: [PATCH 2/6] Remove obsolete query suggestion logic: accept_suggestion
 (flexsearch)

---
 assets/js/index.js | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 058a10762..8290ac49b 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -117,7 +117,6 @@ Source:
   ;
 
   search.addEventListener('input', show_results, true);
-  suggestions.addEventListener('click', accept_suggestion, true);
 
   function show_results(){
     const maxResult = 5;
@@ -157,15 +156,4 @@ Source:
         if(suggestions.childElementCount == maxResult) break;
     }
   }
-
-  function accept_suggestion(){
-
-      while(suggestions.lastChild){
-
-          suggestions.removeChild(suggestions.lastChild);
-      }
-
-      return false;
-  }
-
 }());

From a409d55365839e4afd9e2d38e0ce826b0f914887 Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:16:33 +0200
Subject: [PATCH 3/6] Use Map instead of object for flat flexsearch results

---
 assets/js/index.js | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 8290ac49b..61d9aa84b 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -124,18 +124,17 @@ Source:
     var results = index.search(searchQuery, {limit: maxResult, enrich: true});
 
     // flatten results since index.search() returns results for each indexed field
-    const flatResults = {}; // keyed by href to dedupe results
+    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);
     }
 
     suggestions.innerHTML = "";
     suggestions.classList.remove('d-none');
 
     // construct a list of suggestions
-    for(const href in flatResults) {
-        const doc = flatResults[href];
-
+    for(const [href, doc] of flatResults) {
         const entry = document.createElement('div');
         suggestions.appendChild(entry);
 

From 1710b8082932e1e5f27c3c119cf25bcd794f9c2a Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:34:57 +0200
Subject: [PATCH 4/6] Add descriptive class names for flexsearch result items

---
 assets/js/index.js                  | 2 ++
 assets/scss/components/_search.scss | 8 ++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 61d9aa84b..7f4bfcc25 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -144,10 +144,12 @@ Source:
 
         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);
diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss
index 6beebf2d6..739500477 100644
--- a/assets/scss/components/_search.scss
+++ b/assets/scss/components/_search.scss
@@ -43,12 +43,12 @@
   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 {
   color: $gray-700;
 }
 
@@ -61,7 +61,7 @@
     display: flex;
   }
 
-  #suggestions span:first-child {
+  .suggestion__title {
     width: 9rem;
     padding-right: 1rem;
     border-right: 1px solid $gray-200;
@@ -69,7 +69,7 @@
     text-align: right;
   }
 
-  #suggestions span:nth-child(2) {
+  .suggestion__description {
     width: 19rem;
     padding-left: 1rem;
   }

From af6c51f6f2962257c26ec72fd93759bee3562cac Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:38:04 +0200
Subject: [PATCH 5/6] If flexsearch returns no results, display message

---
 assets/js/index.js                  |  9 +++++++++
 assets/scss/components/_search.scss | 11 ++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 7f4bfcc25..24049b987 100644
--- 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
index 739500477..45ec2afff 100644
--- 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;
 }
 

From 4d9221d7a41ea910b21d96df500c14360dd5573f Mon Sep 17 00:00:00 2001
From: Michael Schnerring <3743342+schnerring@users.noreply.github.com>
Date: Fri, 15 Oct 2021 15:42:26 +0200
Subject: [PATCH 6/6] flexsearch: only display 'no results' message if search
 query is not empty

---
 assets/js/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/js/index.js b/assets/js/index.js
index 24049b987..b99ab905b 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -134,7 +134,7 @@ Source:
     suggestions.classList.remove('d-none');
 
     // inform user that no results were found
-    if (flatResults.size === 0) {
+    if (flatResults.size === 0 && searchQuery) {
       const noResultsMessage = document.createElement('div')
       noResultsMessage.innerHTML = `No results for "<strong>${searchQuery}</strong>"`
       noResultsMessage.classList.add("suggestion__no-results");