# 🔍 Add Real-Time FAQ Search & Filter Functionality [GSSoC 2025]

views/css/index.css

@@ -584,3 +584,111 @@ hr{
     cursor: pointer;
     border-radius: 99%;
   }
+
+/* ========================================
+   FAQ SEARCH FEATURE STYLES
+   ======================================== */
+
+/* Search input focus effect */
+#faq-search-input:focus {
+  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.1);
+}
+
+.tw-dark #faq-search-input:focus {
+  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.2);
+}
+
+/* Clear button hover effect */
+#faq-search-clear {
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+#faq-search-clear:hover {
+  transform: scale(1.1);
+}
+
+/* Results counter animation */
+#faq-search-results {
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* FAQ highlight effect when searching */
+.faq-highlight {
+  position: relative;
+}
+
+.faq-highlight::before {
+  content: '';
+  position: absolute;
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 4px;
+  height: 60%;
+  background: linear-gradient(180deg, #a855f7, #8b5cf6);
+  border-radius: 2px;
+  animation: pulseGlow 2s ease-in-out infinite;
+}
+
+@keyframes pulseGlow {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
+  }
+}
+
+/* No results message styling */
+#faq-result-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  background-color: rgba(168, 85, 247, 0.05);
+}
+
+.tw-dark #faq-result-count {
+  background-color: rgba(168, 85, 247, 0.1);
+}
+
+/* Search input placeholder animation */
+@keyframes placeholderShift {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+#faq-search-input::placeholder {
+  animation: placeholderShift 3s ease-in-out infinite;
+}
+
+/* Mobile responsiveness for search */
+@media (max-width: 768px) {
+  #faq-search-input {
+    font-size: 14px;
+    padding: 0.75rem 2.5rem;
+  }
+
+  #faq-search-input::placeholder {
+    font-size: 13px;
+  }
+}

views/index.html

@@ -1831,10 +1831,37 @@ <h3 class="tw-text-4xl tw-font-medium max-md:tw-text-2xl tw-uppercase">
       >
         Regarding GSSOC FAQ BOT
       </p>
+
+      <!-- FAQ Search Bar -->
+      <div class="tw-w-full tw-max-w-[850px] tw-mt-6">
+        <div class="tw-relative tw-w-full">
+          <div class="tw-absolute tw-left-4 tw-top-1/2 tw--translate-y-1/2 tw-text-gray-400 dark:tw-text-gray-500">
+            <i class="bi bi-search tw-text-lg"></i>
+          </div>
+          <input
+            type="text"
+            id="faq-search-input"
+            placeholder="Search FAQs... (e.g., 'contribute', 'bot features', 'free')"
+            class="tw-w-full tw-px-12 tw-py-3 tw-text-base tw-rounded-xl tw-border-2 tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-[#17181b] tw-text-gray-800 dark:tw-text-gray-200 tw-outline-none focus:tw-border-purple-500 dark:focus:tw-border-purple-400 tw-transition-colors tw-duration-300 placeholder:tw-text-gray-400 dark:placeholder:tw-text-gray-500"
+          />
+          <button
+            id="faq-search-clear"
+            class="tw-absolute tw-right-4 tw-top-1/2 tw--translate-y-1/2 tw-text-gray-400 dark:tw-text-gray-500 hover:tw-text-gray-600 dark:hover:tw-text-gray-300 tw-transition-colors tw-hidden"
+            aria-label="Clear search"
+          >
+            <i class="bi bi-x-circle-fill tw-text-xl"></i>
+          </button>
+        </div>
+        <div id="faq-search-results" class="tw-mt-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-text-center tw-hidden">
+          <span id="faq-result-count"></span>
+        </div>
+      </div>
+
       <div
+        id="faq-container"
         class="tw-mt-5 tw-flex tw-min-h-[300px] tw-w-full tw-max-w-[850px] tw-flex-col tw-gap-4"
       >
-        <div class="faq tw-w-full">
+        <div class="faq tw-w-full" data-faq-item data-faq-question="what's gssoc faq bot" data-faq-answer="discord bot streamline answering frequently asked questions managers mentors gssoc community automates responses common questions instant answers new members reducing workload">
           <h4
             class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
           >
@@ -1895,7 +1922,7 @@ <h3 class="tw-text-4xl tw-font-medium max-md:tw-text-2xl tw-uppercase">
           </div>
         </div>
         <hr />
-        <div class="faq tw-w-full">
+        <div class="faq tw-w-full" data-faq-item data-faq-question="what all other features does the gssoc faq bot provide" data-faq-answer="features bot project details comprehensive information complete overview search functionality autocomplete support projects phase name technology">
           <h4
             class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
           >
@@ -1955,7 +1982,7 @@ <h3 class="tw-text-4xl tw-font-medium max-md:tw-text-2xl tw-uppercase">
           </div>
         </div>
         <hr />
-        <div class="faq tw-w-full">
+        <div class="faq tw-w-full" data-faq-item data-faq-question="how to contribute in gssoc" data-faq-answer="contributing easy visit project list select fork clone repository make changes commit push pull request star repository github open source contribution">
           <h4
             class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
           >
@@ -2058,7 +2085,7 @@ <h3 class="tw-text-4xl tw-font-medium max-md:tw-text-2xl tw-uppercase">
         </div>
         <hr />
 
-        <div class="faq tw-w-full">
+        <div class="faq tw-w-full" data-faq-item data-faq-question="is gssoc faq bot free to use" data-faq-answer="yes free absolutely private servers traffic requests testimonial users experiences images action best part">
           <h4
             class="faq-accordion tw-flex tw-w-full tw-select-none tw-text-xl max-md:tw-text-lg"
           >

views/scripts/components.js

@@ -259,6 +259,155 @@ fetch('/faqs.json')
   });
 
 
+// ========================================
+// FAQ SEARCH & FILTER FUNCTIONALITY
+// ========================================
+
+document.addEventListener('DOMContentLoaded', function() {
+  const searchInput = document.getElementById('faq-search-input');
+  const clearButton = document.getElementById('faq-search-clear');
+  const resultsDiv = document.getElementById('faq-search-results');
+  const resultCount = document.getElementById('faq-result-count');
+  const faqContainer = document.getElementById('faq-container');
+
+  if (!searchInput || !faqContainer) return;
+
+  // Get all FAQ items
+  const faqItems = faqContainer.querySelectorAll('[data-faq-item]');
+  const totalFaqs = faqItems.length;
+
+  /**
+   * Filter FAQ items based on search query
+   */
+  function filterFAQs() {
+    const query = searchInput.value.toLowerCase().trim();
+
+    // Show/hide clear button
+    if (query.length > 0) {
+      clearButton.classList.remove('tw-hidden');
+    } else {
+      clearButton.classList.add('tw-hidden');
+    }
+
+    // If query is empty, show all FAQs
+    if (query.length === 0) {
+      faqItems.forEach(item => {
+        item.style.display = '';
+        item.classList.remove('faq-highlight');
+        const hr = item.nextElementSibling;
+        if (hr && hr.tagName === 'HR') {
+          hr.style.display = '';
+        }
+      });
+      resultsDiv.classList.add('tw-hidden');
+      return;
+    }
+
+    let visibleCount = 0;
+
+    // Filter FAQs
+    faqItems.forEach((item, index) => {
+      const question = item.getAttribute('data-faq-question') || '';
+      const answer = item.getAttribute('data-faq-answer') || '';
+      const searchText = (question + ' ' + answer).toLowerCase();
+
+      const matches = searchText.includes(query);
+
+      if (matches) {
+        item.style.display = '';
+        item.classList.add('faq-highlight');
+        visibleCount++;
+
+        // Show separator if not last visible item
+        const hr = item.nextElementSibling;
+        if (hr && hr.tagName === 'HR') {
+          hr.style.display = '';
+        }
+      } else {
+        item.style.display = 'none';
+        item.classList.remove('faq-highlight');
+
+        // Hide separator
+        const hr = item.nextElementSibling;
+        if (hr && hr.tagName === 'HR') {
+          hr.style.display = 'none';
+        }
+      }
+    });
+
+    // Update results count
+    resultsDiv.classList.remove('tw-hidden');
+    if (visibleCount === 0) {
+      resultCount.innerHTML = `
+        <i class="bi bi-info-circle tw-mr-1"></i>
+        No FAQs found for "<strong>${escapeHtml(query)}</strong>". Try different keywords.
+      `;
+      resultCount.className = 'tw-text-orange-600 dark:tw-text-orange-400';
+    } else if (visibleCount === totalFaqs) {
+      resultCount.innerHTML = `
+        <i class="bi bi-check-circle tw-mr-1"></i>
+        Showing all <strong>${totalFaqs}</strong> FAQs
+      `;
+      resultCount.className = 'tw-text-green-600 dark:tw-text-green-400';
+    } else {
+      resultCount.innerHTML = `
+        <i class="bi bi-funnel tw-mr-1"></i>
+        Found <strong>${visibleCount}</strong> of ${totalFaqs} FAQs matching "<strong>${escapeHtml(query)}</strong>"
+      `;
+      resultCount.className = 'tw-text-purple-600 dark:tw-text-purple-400';
+    }
+  }
+
+  /**
+   * Clear search input and reset filters
+   */
+  function clearSearch() {
+    searchInput.value = '';
+    searchInput.focus();
+    filterFAQs();
+  }
+
+  /**
+   * Escape HTML to prevent XSS
+   */
+  function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+  }
+
+  // Event listeners
+  searchInput.addEventListener('input', filterFAQs);
+  searchInput.addEventListener('keyup', function(e) {
+    if (e.key === 'Escape') {
+      clearSearch();
+    }
+  });
+
+  clearButton.addEventListener('click', clearSearch);
+
+  // Add subtle animation to highlighted FAQs
+  const style = document.createElement('style');
+  style.textContent = `
+    .faq-highlight {
+      animation: highlightFade 0.3s ease-in-out;
+    }
+
+    @keyframes highlightFade {
+      0% {
+        transform: translateX(-5px);
+        opacity: 0.7;
+      }
+      100% {
+        transform: translateX(0);
+        opacity: 1;
+      }
+    }
+  `;
+  document.head.appendChild(style);
+});
+
+
 //Scroll Button Functionality
 // Get reference to the button
 const scrollBtn = document.getElementById('scrollTopBtn');