From 4040fcbfda944ff51146587ea55cda9b24689da6 Mon Sep 17 00:00:00 2001
From: Sivaprasath <121082414+sivaprasath2004@users.noreply.github.com>
Date: Thu, 20 Jun 2024 22:52:35 +0530
Subject: [PATCH] Implemented search result suggestion (#1175)

---
 script.js | 54 +++++++++++++++++++++++++++++++++++++++++++++++++-----
 style.css | 24 ++++++++++++++++++++++++
 2 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/script.js b/script.js
index 967478c66..5cb3db209 100644
--- a/script.js
+++ b/script.js
@@ -8,6 +8,7 @@ document.addEventListener("DOMContentLoaded", function () {
 });
 
 hamburger.addEventListener("click", mobileMenu);
+
 function mobileMenu() {
     hamburger.classList.toggle("active");
     navMenu.classList.toggle("active");
@@ -104,6 +105,51 @@ window.addEventListener('scroll', function () {
 
 window.onscroll = calcScrollValue;
 window.onload = calcScrollValue;
+const input = document.getElementById('calculatorSearch');
+let calculators = document.querySelectorAll('.container .box');
+let h2TextContents = [];
+
+calculators.forEach(calculator => {
+    let h2Element = calculator.querySelector('h2');
+    if (h2Element) {
+        h2TextContents.push(h2Element.textContent);
+    }
+});
+
+let search_input_container = document.querySelector('.search-input-container'),
+    calculatorSearch = document.getElementById('calculatorSearch')
+input.addEventListener('input', (e) => {
+    let search_input_container = document.querySelector('.search-input-container')
+    let result = document.getElementById('searchResults_Container') ? document.getElementById('searchResults_Container') : false
+    if (result) {
+        search_input_container.removeChild(result)
+    }
+    let searchResults_Container = document.createElement('div')
+    let div = document.createElement('div')
+    searchResults_Container.setAttribute('id', 'searchResults_Container')
+    let filtered = h2TextContents.filter(ele => {
+        const searchTerm = e.target.value.toLowerCase();
+        const elementText = ele.toLowerCase();
+        return elementText.includes(searchTerm);
+    });
+    if (filtered && e.target.value.length > 0) {
+        filtered.map((item, index) => {
+            let p = document.createElement('p')
+            p.textContent = item
+            p.setAttribute('key', index)
+            div.appendChild(p)
+            p.addEventListener('click', () => {
+                calculatorSearch.value = item
+                searchResults_Container.removeChild(div)
+            })
+        })
+        searchResults_Container.appendChild(div)
+        search_input_container.appendChild(searchResults_Container)
+    }
+    if (e.target.value.length === 0) {
+        searchResults_Container.removeChild(div)
+    }
+})
 
 // Function to filter calculators
 function filterCalculators() {
@@ -113,7 +159,6 @@ function filterCalculators() {
     calculators = document.querySelectorAll('.container .box');
     var noResults = document.getElementById('noResults');
     var hasResults = false;
-
     for (i = 0; i < calculators.length; i++) {
         var calculator = calculators[i];
         var h2 = calculator.querySelector('h2');
@@ -161,11 +206,11 @@ if (SpeechRecognition) {
     const micIcon = micBtn.firstElementChild;
 
     micBtn.addEventListener("click", micBtnClick);
+
     function micBtnClick() {
         if (micIcon.classList.contains("fa-microphone")) { // Start Voice Recognition
             recognition.start(); // First time you have to allow access to mic!
-        }
-        else {
+        } else {
             recognition.stop();
         }
     }
@@ -195,8 +240,7 @@ if (SpeechRecognition) {
         searchBarInput.value = newtranscript;
         filterCalculators();
     }
-}
-else {
+} else {
     console.log("Your Browser does not support speech Recognition");
     info.textContent = "Your Browser does not support Speech Recognition";
 }
diff --git a/style.css b/style.css
index be3b48fce..1b71c2509 100644
--- a/style.css
+++ b/style.css
@@ -1577,6 +1577,30 @@ section {
     margin-left: 8rem;
     align-items: center;
     display: inline;
+    position: relative;
+}
+
+#searchResults_Container {
+    position: absolute;
+    max-height: 40rem;
+    background-color: white;
+    border-radius: 12px;
+    z-index: 2;
+    right: 0;
+    margin-top: 1rem;
+    left: 0;
+    color: black;
+    overflow: scroll;
+    overflow-x: hidden;
+    max-width: 60rem;
+}
+
+#searchResults_Container p {
+    text-align: left;
+    padding: 1rem;
+    border-bottom: 0.1rem solid;
+    font-size: 1.3rem;
+    font-weight: 600;
 }
 
 #searchBar button {