on escape and schortcut functionality added for search

layouts/partials/sections/header.html

@@ -39,7 +39,7 @@
 
             {{ if not (.Site.Params.navbar.disableSearch | default false) }}
                 <div>
-                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder="Search ..."
+                    <input id="search" autocomplete="off" class="form-control mr-sm-2 d-none d-md-block" placeholder="Ctrl + k"
                         aria-label="Search" oninput="searchOnChange(event)">
                 </div>
             {{ end }}
@@ -58,7 +58,7 @@
                     {{ if not (.Site.Params.navbar.disableSearch | default false) }}
                         <li class="nav-item navbar-text d-block d-md-none">
                             <div class="nav-link">
-                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="Search ..." aria-label="Search" oninput="searchOnChange(event)">
+                                <input id="search" autocomplete="off" class="form-control mr-sm-2" placeholder="Ctrl + k" aria-label="Search" oninput="searchOnChange(event)">
                             </div>
                         </li>
                     {{ end }}

static/js/search.js

@@ -1,22 +1,11 @@
 async function searchOnChange(evt) {
   let searchQuery = evt.target.value;
+  var inputEle = document.querySelectorAll("input#search");
+  inputEle.forEach((element) => {
+    element.value = searchQuery;
+  });
 
   if (searchQuery !== "") {
-    const searchButtonEle = document.querySelectorAll("#search");
-    let searchButtonPosition;
-    if (window.innerWidth > 768) {
-      searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
-      document.getElementById("search-content").style.width = "500px";
-    } else {
-      searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
-      document.getElementById("search-content").style.width = "300px";
-    }
-
-    document.getElementById("search-content").style.top =
-      searchButtonPosition.top + 50 + "px";
-    document.getElementById("search-content").style.left =
-      searchButtonPosition.left + "px";
-
     let searchJson = await fetch("/index.json").then((res) => res.json());
     let searchResults = searchJson.filter((item) => {
       let res = false;
@@ -65,9 +54,79 @@ async function searchOnChange(evt) {
       let searchResultsHtml = `<p class="text-center py-3">No results found for "${searchQuery}"</p>`;
       document.getElementById("search-results").innerHTML = searchResultsHtml;
     }
+    alignSearchContent();
     document.getElementById("search-content").style.display = "block";
   } else {
     document.getElementById("search-content").style.display = "none";
     document.getElementById("search-results").innerHTML = "";
   }
 }
+
+function alignSearchContent() {
+  const searchButtonEle = document.querySelectorAll("#search");
+  if (searchButtonEle.value !== "") {
+    let searchButtonPosition;
+    if (window.innerWidth > 768) {
+      searchButtonPosition = searchButtonEle[0].getBoundingClientRect();
+      document.getElementById("search-content").style.width = "500px";
+    } else {
+      var navbarCollapse = document.querySelector("#navbarContent");
+      navbarCollapse.classList.add("show");
+      searchButtonPosition = searchButtonEle[1].getBoundingClientRect();
+      document.getElementById("search-content").style.width = "300px";
+    }
+
+    document.getElementById("search-content").style.top =
+      searchButtonPosition.top + 50 + "px";
+    document.getElementById("search-content").style.left =
+      searchButtonPosition.left + "px";
+  }
+}
+
+function resetSearch(e) {
+  if (
+    e.keyCode === 27 ||
+    (e.target.id !== "search" &&
+      e.target.closest("section#search-content") === null)
+  ) {
+    if (document.getElementById("search-results").innerHTML !== "") {
+      document.getElementById("search-content").style.display = "none";
+      document.getElementById("search-results").innerHTML = "";
+      var inputEle = document.querySelectorAll("input#search");
+      inputEle.forEach((element) => {
+        element.value = "";
+        element.blur();
+      });
+    }
+  }
+}
+
+document.onkeyup = function () {
+  switch (event.keyCode) {
+    // ESC
+    case 27:
+      resetSearch(event);
+      break;
+
+    // ctrl + k
+    case 75:
+      if (event.ctrlKey) {
+        document.getElementById("search").focus();
+      }
+      break;
+  }
+};
+
+window.addEventListener("keydown", function (e) {
+  if (e.keyCode === 75 && e.ctrlKey) {
+    e.preventDefault();
+  }
+});
+
+// Close search on click outside and on resize
+document.addEventListener("click", function (e) {
+  resetSearch(e);
+});
+window.addEventListener("resize", function (e) {
+  alignSearchContent();
+});