Fixed Arrow Key Selection of Search Suggestion (#202)

* Fixed Arrow Key Selection of Search Suggestion * Update script.js * Fixed Arrow key doesn't let user to show down results when going down. * Update style.css * Update script.js if mouse cursor is within resultBox, then keyboard selection is unhighlighted * Modified Boarder Radius Co-authored-by: prem-k-r <60751338+prem-k-r@users.noreply.github.com> * Update index.html decreasing gap between searchbar and suggestion box * Update style.css decreasing gap between searchbar and suggestion box --------- Co-authored-by: Prem Kumar <60751338+prem-k-r@users.noreply.github.com>
XengShi · Nov 22, 2024 · a801377 · a801377
1 parent 43c7749
commit a801377
Show file tree

Hide file tree

Showing 3 changed files with 115 additions and 55 deletions.
diff --git a/index.html b/index.html
@@ -518,7 +518,7 @@
                         <button id="enterBtn">Search</button>
                     </div>
                 </div>
-            </div><br>
+            </div>
             <div id="resultBox" class="resultBox bgLightTint" style="display: none;"></div>
             <!-- ----------end of searchbar-------------- -->
 

diff --git a/script.js b/script.js
@@ -1023,6 +1023,10 @@ const applySelectedTheme = (colorValue) => {
             .dark-theme #sujhaw {
                 fill: #b1b1b1;
             }
+
+            .resultItem.active {
+                background-color: var(--darkColor-dark);;
+            }
         `;
         document.head.appendChild(darkThemeStyleTag);
 
@@ -1144,11 +1148,9 @@ function toggleShortcuts() {
     }
 }
 
-
-
 document.getElementById("0NIHK").onclick = toggleShortcuts;
 
-// ------------search suggestions ---------------
+// ------------Search Suggestions---------------
 
 // Show the result box
 function showResultBox() {
@@ -1161,8 +1163,10 @@ function hideResultBox() {
     resultBox.classList.remove('show');
     //resultBox.style.display = "none";
 }
-showResultBox()
-hideResultBox()
+
+showResultBox();
+hideResultBox();
+
 document.getElementById("searchQ").addEventListener("input", async function () {
     const searchsuggestionscheckbox = document.getElementById("searchsuggestionscheckbox");
     if (searchsuggestionscheckbox.checked) {
@@ -1182,27 +1186,80 @@ document.getElementById("searchQ").addEventListener("input", async function () {
             const suggestions = await getAutocompleteSuggestions(query);
 
             if (suggestions == "") {
-                hideResultBox()
+                hideResultBox();
             } else {
                 // Clear the result box
                 resultBox.innerHTML = '';
 
                 // Add suggestions to the result box
-                suggestions.forEach((suggestion) => {
+                suggestions.forEach((suggestion, index) => {
                     const resultItem = document.createElement("div");
                     resultItem.classList.add("resultItem");
                     resultItem.textContent = suggestion;
+                    resultItem.setAttribute("data-index", index);
                     resultItem.onclick = () => {
                         var resultlink = searchEngines[selectedOption] + encodeURIComponent(suggestion);
                         window.location.href = resultlink;
                     };
                     resultBox.appendChild(resultItem);
                 });
-                showResultBox()
+                showResultBox();
             }
 
         } else {
-            hideResultBox()
+            hideResultBox();
+        }
+    }
+});
+
+let isMouseOverResultBox = false;
+// Track mouse entry and exit within the resultBox
+resultBox.addEventListener("mouseenter", () => {
+    isMouseOverResultBox = true;
+    // Remove keyboard highlight
+    const activeItem = resultBox.querySelector(".active");
+    if (activeItem) {
+        activeItem.classList.remove("active");
+    }
+});
+
+resultBox.addEventListener("mouseleave", () => {
+    isMouseOverResultBox = false;
+});
+
+document.getElementById("searchQ").addEventListener("keydown", function (e) {
+    if (isMouseOverResultBox) {
+        return; // Ignore keyboard events if the mouse is in the resultBox
+    }
+    const activeItem = resultBox.querySelector(".active");
+    let currentIndex = activeItem ? parseInt(activeItem.getAttribute("data-index")) : -1;
+
+    if (resultBox.children.length > 0) {
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            if (activeItem) {
+                activeItem.classList.remove("active");
+            }
+            currentIndex = (currentIndex + 1) % resultBox.children.length;
+            resultBox.children[currentIndex].classList.add("active");
+
+            // Ensure the active item is visible within the result box
+            const activeElement = resultBox.children[currentIndex];
+            activeElement.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "ArrowUp") {
+            e.preventDefault();
+            if (activeItem) {
+                activeItem.classList.remove("active");
+            }
+            currentIndex = (currentIndex - 1 + resultBox.children.length) % resultBox.children.length;
+            resultBox.children[currentIndex].classList.add("active");
+
+            // Ensure the active item is visible within the result box
+            const activeElement = resultBox.children[currentIndex];
+            activeElement.scrollIntoView({ block: "nearest" });
+        } else if (e.key === "Enter" && activeItem) {
+            e.preventDefault();
+            activeItem.click();
         }
     }
 });
@@ -1265,16 +1322,17 @@ async function getAutocompleteSuggestions(query) {
     }
 }
 
-
 // Hide results when clicking outside
 document.addEventListener("click", function (event) {
     const searchbar = document.getElementById("searchbar");
     // const resultBox = document.getElementById("resultBox");
 
     if (!searchbar.contains(event.target)) {
-        hideResultBox()
+        hideResultBox();
     }
 });
+// ------------End of Search Suggestions---------------
+
 // ------------Showing & Hiding Menu-bar ---------------
 const menuButton = document.getElementById("menuButton");
 const menuBar = document.getElementById("menuBar");

diff --git a/style.css b/style.css
@@ -107,51 +107,53 @@
     --always-show-dock-background: 0;
 }
 .resultBox {
-    max-height: 250px;
-    overflow-y: auto;
-
-    position: absolute;
-    top: 1;
-    left: 0;
-    width: 100%;
-    border-radius: var(--round);
-
-    padding: 10px;
-    scrollbar-width: none; /* For Firefox */
-
-    /* Initially hidden */
-    opacity: 0;
-    z-index: -1000;
-    transform: translateY(-70px);
-    transition: opacity 0.5s ease, transform 0.5s ease, z-index 0.5s ease; 
-    pointer-events: none; 
-}
-
-.resultBox::-webkit-scrollbar {
-    display: none; /* For Chrome, Safari, and Edge */
-}
-
-/* Visible state: when you want the result box to appear */
-.resultBox.show {
-    opacity: 1;
-    visibility: visible; 
-    transform: translateY(0); 
-    z-index: 1000;
-    pointer-events: all;
-}
-
-.resultItem {
-    padding: 10px;
-    cursor: pointer;
-    font-size: 1.2rem;
-    color: var(--textColorDark-blue);
-}
+     max-height: 222px;
+     overflow-y: auto;
+    
+     position: absolute;
+     bottom: -100px;;
+     left: 0;
+     width: 100%;
+     border-radius: var(--round);
+ 
+     padding: 5px 10px;
+     scrollbar-width: none; /* For Firefox */
+ 
+     /* Initially hidden */
+     opacity: 0;
+     z-index: -1000;
+     transform: translateY(-70px);
+     transition: opacity 0.5s ease, transform 0.5s ease, z-index 0.5s ease; 
+     pointer-events: none; 
+ }
+ 
+ .resultBox::-webkit-scrollbar {
+     display: none; /* For Chrome, Safari, and Edge */
+ }
+ 
+ /* Visible state: when you want the result box to appear */
+ .resultBox.show {
+     opacity: 1;
+     visibility: visible; 
+     transform: translateY(0); 
+     z-index: 1000;
+     pointer-events: all;
+ }
+ 
+ .resultItem {
+     padding: 8px;
+     cursor: pointer;
+     font-size: 1.1rem;
+     color: var(--textColorDark-blue);
+ }
 
+.resultItem.active,
 .resultItem:hover {
-   background-color: var(--darkColor-blue);
-   border-radius: 15px;
-   color: #fff;
-}
+    background-color: var(--darkColor-blue);
+    border-radius: 16px;
+    color: #fff;
+ }
+
 .spacer {
     height: 65px; /* Adjust this value to create space */
 }