Merge pull request #1518 from sayanp607/main

suggestion functionality added in search bar
iamrahulmahato · Oct 21, 2024 · a21820f · a21820f
2 parents 148b469 + 13fae55
commit a21820f
Show file tree

Hide file tree

Showing 2 changed files with 90 additions and 15 deletions.
diff --git a/css/style.css b/css/style.css
@@ -904,24 +904,56 @@ body {
     color: #192333;
     transform: scale(1.1); 
 }
+#suggestions {
+  display: none;
+  width: 100%; 
+  max-width: 50%; 
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  color: white !important;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  background-color: #000327ad;
+  position: absolute;
+  z-index: 1000;
+  top: auto; /* Slightly below the search bar (adjust this value if needed) */
+  left: 25%; 
+  padding: 0;
+}
+
+.suggestion-item {
+  padding: 12px 20px;
+  border-bottom: 1px solid #eee;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.suggestion-item:hover {
+  background-color: #efd45b75;
+  color: #000;
+  transform: scale(1.1);
+  transition: transform 0.3s ease; 
+}
+
 #search-input {
-    width: 100%;
-    max-width: 50%;
-    min-width: 40%;
-    padding: 12px 20px;
-    margin: 20px 0;
-    font-size: 16px;
-    border: 1px solid #ccc;
-    border-radius: 8px;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+  width: 100%;
+  max-width: 50%;
+  min-width: 40%;
+  padding: 12px 20px;
+  margin: 20px 0;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s ease;
+  position: relative; /* Ensures suggestions are positioned correctly under the search bar */
 }
 
 #search-input:focus {
-    border-color: #1251e1;
-    outline: none;
-    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
+  border-color: #1251e1;
+  outline: none;
+  box-shadow: 0 4px 8px rgba(0, 123, 255, 0.2);
 }
+
 input[type="text"],
 input[type="password"],
 input[type="email"] {

diff --git a/js/app.js b/js/app.js
@@ -115,13 +115,55 @@ scrollToTopBtn.onclick = function() {
     window.scrollTo({ top: 0, behavior: "smooth" });
 };
 
+
+
 let filterCardsTimeout;
+let suggestionsContainer = document.createElement('div');
+suggestionsContainer.setAttribute('id', 'suggestions');
+document.getElementById('search-input').parentElement.appendChild(suggestionsContainer);
 
-document.getElementById('search-input').addEventListener('input', function() {
+document.getElementById('search-input').addEventListener('input', function () {
     clearTimeout(filterCardsTimeout);
-    filterCardsTimeout = setTimeout(filterCards, 500);
+    filterCardsTimeout = setTimeout(showSuggestions, 300);
 });
 
+function showSuggestions() {
+    let searchTerm = document.getElementById('search-input').value.toLowerCase();
+    let cards = document.querySelectorAll('.card');
+    suggestionsContainer.innerHTML = ''; // Clear previous suggestions
+
+    if (searchTerm === '') {
+        suggestionsContainer.style.display = 'none'; // Hide suggestions if input is empty
+        return;
+    }
+
+    let matchedCards = Array.from(cards).filter(function (card) {
+        let cardHeading = card.querySelector('.card-heading').innerText.toLowerCase();
+        let cardDescription = card.querySelector('.card-description').innerText.toLowerCase();
+        return cardHeading.includes(searchTerm) || cardDescription.includes(searchTerm);
+    });
+
+    if (matchedCards.length > 0) {
+        suggestionsContainer.style.display = 'block'; // Show suggestions
+        matchedCards.forEach(function (card) {
+            let suggestionItem = document.createElement('div');
+            suggestionItem.classList.add('suggestion-item');
+            suggestionItem.innerText = card.querySelector('.card-heading').innerText;
+
+            // Clicking a suggestion will populate the search bar and hide suggestions
+            suggestionItem.addEventListener('click', function () {
+                document.getElementById('search-input').value = card.querySelector('.card-heading').innerText;
+                suggestionsContainer.style.display = 'none'; // Hide suggestions
+                filterCards(); // Trigger filter after selection
+            });
+
+            suggestionsContainer.appendChild(suggestionItem);
+        });
+    } else {
+        suggestionsContainer.style.display = 'none'; // Hide if no match
+    }
+}
+
 function filterCards() {
     let searchTerm = document.getElementById('search-input').value.toLowerCase();
     let cards = document.querySelectorAll('.card');
@@ -136,6 +178,7 @@ function filterCards() {
     });
 }
 
+
 document.addEventListener('DOMContentLoaded', function () {
     const currentTheme = document.documentElement.getAttribute("data-theme");