From e03348c041bc8c5c6399d2299a4a63dc93473aa0 Mon Sep 17 00:00:00 2001
From: Aditya Telange <21258296+adityatelange@users.noreply.github.com>
Date: Sun, 7 Feb 2021 21:34:34 +0530
Subject: [PATCH] improve search

    - fix menu element becoming inactive
      change class active -> focus
    - set input type seach #198
    - add a reset func
    - add script to clear searchbox
      when clicked on X sign
---
 assets/css/search.css        |  2 +-
 assets/js/fastsearch.js      | 39 ++++++++++++++++++++++--------------
 layouts/_default/search.html |  4 ++--
 3 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/assets/css/search.css b/assets/css/search.css
index 5deb71ed..2b9d4bc9 100644
--- a/assets/css/search.css
+++ b/assets/css/search.css
@@ -39,7 +39,7 @@
     outline: none;
 }
 
-#searchResults .active {
+#searchResults .focus {
     transform: scale(.98);
     border: 2px solid var(--tertiary)
 }
diff --git a/assets/js/fastsearch.js b/assets/js/fastsearch.js
index 935d8fbd..2546310a 100644
--- a/assets/js/fastsearch.js
+++ b/assets/js/fastsearch.js
@@ -42,7 +42,13 @@ function itemGen(name, link) {
 }
 
 function activeToggle() {
-    document.activeElement.parentElement.classList.toggle("active")
+    document.activeElement.parentElement.classList.toggle("focus")
+}
+
+function reset() {
+    resultsAvailable = false;
+    resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
+    sInput.focus(); // shift focus to input box
 }
 
 // execute search as each character is typed
@@ -59,16 +65,21 @@ sInput.onkeyup = function (e) {
             resultSet = resultSet + itemGen(results[item].item.title, results[item].item.permalink)
         }
 
-        document.getElementById("searchResults").innerHTML = resultSet;
+        resList.innerHTML = resultSet;
         resultsAvailable = true;
         first = resList.firstChild;
         last = resList.lastChild;
     } else {
         resultsAvailable = false;
-        document.getElementById("searchResults").innerHTML = '';
+        resList.innerHTML = '';
     }
 }
 
+sInput.addEventListener('search', function (e) {
+    // clicked on x
+    if (!this.value) reset()
+})
+
 // kb bindings
 document.onkeydown = function (e) {
     let key = e.key;
@@ -76,9 +87,9 @@ document.onkeydown = function (e) {
     let inbox = document.getElementById("searchbox").contains(ae)
 
     if (ae === sInput) {
-        var elements = document.getElementsByClassName('active');
+        var elements = document.getElementsByClassName('focus');
         while (elements.length > 0) {
-            elements[0].classList.remove('active');
+            elements[0].classList.remove('focus');
         }
     }
 
@@ -86,16 +97,16 @@ document.onkeydown = function (e) {
         e.preventDefault();
         if (ae == sInput) {
             // if the currently focused element is the search input, focus the <a> of first <li>
-            activeToggle(); // rm active class
+            activeToggle(); // rm focus class
             resList.firstChild.lastChild.focus();
-            activeToggle(); // add active class
+            activeToggle(); // add focus class
         } else if (ae.parentElement == last) {
             // if the currently focused element's parent is last, do nothing
         } else {
             // otherwise select the next search result
-            activeToggle(); // rm active class
+            activeToggle(); // rm focus class
             ae.parentElement.nextSibling.lastChild.focus();
-            activeToggle(); // add active class
+            activeToggle(); // add focus class
         }
     } else if (key === "ArrowUp" && resultsAvailable && inbox) {
         e.preventDefault();
@@ -103,19 +114,17 @@ document.onkeydown = function (e) {
             // if the currently focused element is input box, do nothing
         } else if (ae.parentElement == first) {
             // if the currently focused element is first item, go to input box
-            activeToggle(); // rm active class
+            activeToggle(); // rm focus class
             sInput.focus();
         } else {
             // otherwise select the previous search result
-            activeToggle(); // rm active class
+            activeToggle(); // rm focus class
             ae.parentElement.previousSibling.lastChild.focus();
-            activeToggle(); // add active class
+            activeToggle(); // add focus class
         }
     } else if (key === "ArrowRight" && resultsAvailable && inbox) {
         ae.click(); // click on active link
     } else if (key === "Escape") {
-        resultsAvailable = false;
-        resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
-        sInput.focus(); // shift focus to input box
+        reset()
     }
 }
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
index 8ad0bef4..ae9ba068 100644
--- a/layouts/_default/search.html
+++ b/layouts/_default/search.html
@@ -21,8 +21,8 @@
 </header>
 
 <div id="searchbox">
-    <input id="searchInput" autofocus placeholder="{{.Title}} ↵" aria-label="search">
+    <input id="searchInput" autofocus placeholder="{{.Title}} ↵" aria-label="search" type="search">
     <ul id="searchResults" aria-label="search results"></ul>
 </div>
 
-{{- end  }}{{/* end main */}}
+{{- end }}{{/* end main */}}