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

@@ -39,7 +39,7 @@
     outline: none;
 }
 
-#searchResults .active {
+#searchResults .focus {
     transform: scale(.98);
     border: 2px solid var(--tertiary)
 }

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;
+        reset()
-        resList.innerHTML = sInput.value = ''; // clear inputbox and searchResults
-        sInput.focus(); // shift focus to input box
     }
 }

layouts/_default/search.html

@@ -21,7 +21,7 @@
 </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>