interactive
advanced
faq
search
filter
questions
answers
autocomplete
Category · Interactive Difficulty Level · Advanced Published on · January 20, 2025
Searchable FAQ Component
An advanced searchable FAQ component with real-time filtering, search suggestions, and smart search capabilities
#faq
#search
#filter
#questions
#answers
#autocomplete
Responsive Design
Yes
Dark Mode Support
No
lines
341
Browser Compatibility
No
Live Preview
Interact with the component without leaving the page.
Searchable FAQ Component
An advanced searchable FAQ component with real-time filtering, search suggestions, smart search capabilities, and comprehensive search analytics.
Features
- Real-time Search: Instant filtering as you type with debounced input
- Smart Search: Fuzzy matching and typo tolerance for better results
- Search Suggestions: Auto-complete with popular search terms
- Advanced Filters: Category, date, and relevance filtering options
- Search History: Recent searches with quick access
- Highlighted Results: Search term highlighting in questions and answers
- Search Analytics: Track popular searches and user behavior
- Keyboard Navigation: Full keyboard support for search and results
- Voice Search: Speech-to-text search capability
- Export Results: Save search results as PDF or text
- Responsive Design: Works perfectly on all device sizes
- Accessibility: Full ARIA support and screen reader compatibility
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Searchable FAQ Component</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="searchable-faq-container">
<div class="faq-header">
<h1>Searchable FAQ</h1>
<p>Find answers quickly with our intelligent search system</p>
</div>
<div class="search-section">
<div class="search-container">
<div class="search-input-wrapper">
<svg class="search-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
<input type="text"
class="search-input"
placeholder="Search questions, answers, or topics..."
autocomplete="off"
aria-label="Search FAQ">
<button class="voice-search-btn"
aria-label="Voice search"
title="Voice search">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
<path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
<line x1="12" y1="19" x2="12" y2="23"></line>
<line x1="8" y1="23" x2="16" y2="23"></line>
</svg>
</button>
<button class="clear-search-btn"
aria-label="Clear search"
title="Clear search"
style="display: none;">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div class="search-suggestions" style="display: none;">
<div class="suggestions-header">
<span>Popular searches</span>
</div>
<div class="suggestions-list"></div>
</div>
<div class="search-history" style="display: none;">
<div class="history-header">
<span>Recent searches</span>
<button class="clear-history-btn">Clear</button>
</div>
<div class="history-list"></div>
</div>
</div>
<div class="filters-container">
<button class="filters-toggle" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46"></polygon>
</svg>
<span>Filters</span>
</button>
<div class="filters-panel" style="display: none;">
<div class="filter-group">
<label>Category</label>
<select class="category-filter">
<option value="">All Categories</option>
<option value="general">General</option>
<option value="billing">Billing</option>
<option value="technical">Technical</option>
<option value="support">Support</option>
</select>
</div>
<div class="filter-group">
<label>Sort by</label>
<select class="sort-filter">
<option value="relevance">Relevance</option>
<option value="date">Date</option>
<option value="popularity">Popularity</option>
<option value="alphabetical">Alphabetical</option>
</select>
</div>
<div class="filter-group">
<label>Show only</label>
<div class="checkbox-group">
<label class="checkbox-label">
<input type="checkbox" class="answered-only">
<span>Answered questions</span>
</label>
<label class="checkbox-label">
<input type="checkbox" class="recent-only">
<span>Recent updates</span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="search-results-info" style="display: none;">
<div class="results-count"></div>
<div class="search-time"></div>
<button class="export-results-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7,10 12,15 17,10"></polyline>
<line x1="12" y1="15" x2="12" y2="3"></line>
</svg>
Export Results
</button>
</div>
<div class="faq-content">
<div class="no-results" style="display: none;">
<div class="no-results-icon">🔍</div>
<h3>No results found</h3>
<p>Try adjusting your search terms or browse all questions below.</p>
<div class="search-suggestions-inline">
<span>Popular searches:</span>
<div class="suggestion-tags"></div>
</div>
</div>
<div class="faq-items">
<div class="faq-item" data-category="general" data-keywords="account registration signup create profile">
<div class="faq-question">
<h3>How do I create an account?</h3>
<button class="toggle-btn" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
<div class="faq-answer">
<p>Creating an account is simple and takes just a few minutes. Follow these steps:</p>
<ol>
<li>Click the "Sign Up" button in the top right corner</li>
<li>Enter your email address and create a secure password</li>
<li>Verify your email address by clicking the link we send you</li>
<li>Complete your profile with basic information</li>
<li>Start using all our features immediately</li>
</ol>
<div class="answer-meta">
<span class="last-updated">Last updated: January 15, 2024</span>
<div class="answer-actions">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Helpful
</button>
<button class="not-helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
Not helpful
</button>
</div>
</div>
</div>
</div>
<div class="faq-item" data-category="billing" data-keywords="payment methods credit card paypal billing">
<div class="faq-question">
<h3>What payment methods do you accept?</h3>
<button class="toggle-btn" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
<div class="faq-answer">
<p>We accept all major payment methods to make your experience convenient:</p>
<div class="payment-methods">
<div class="payment-category">
<h4>Credit & Debit Cards</h4>
<ul>
<li>Visa</li>
<li>MasterCard</li>
<li>American Express</li>
<li>Discover</li>
</ul>
</div>
<div class="payment-category">
<h4>Digital Wallets</h4>
<ul>
<li>PayPal</li>
<li>Apple Pay</li>
<li>Google Pay</li>
<li>Samsung Pay</li>
</ul>
</div>
</div>
<div class="answer-meta">
<span class="last-updated">Last updated: January 10, 2024</span>
<div class="answer-actions">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Helpful
</button>
<button class="not-helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
Not helpful
</button>
</div>
</div>
</div>
</div>
<div class="faq-item" data-category="technical" data-keywords="password reset forgot login security">
<div class="faq-question">
<h3>How do I reset my password?</h3>
<button class="toggle-btn" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
<div class="faq-answer">
<p>If you've forgotten your password, you can easily reset it:</p>
<div class="reset-steps">
<div class="step">
<div class="step-number">1</div>
<div class="step-content">
<h4>Go to Login Page</h4>
<p>Click "Forgot Password" on the login screen</p>
</div>
</div>
<div class="step">
<div class="step-number">2</div>
<div class="step-content">
<h4>Enter Email</h4>
<p>Provide the email address associated with your account</p>
</div>
</div>
<div class="step">
<div class="step-number">3</div>
<div class="step-content">
<h4>Check Email</h4>
<p>Look for a password reset link in your inbox</p>
</div>
</div>
<div class="step">
<div class="step-number">4</div>
<div class="step-content">
<h4>Create New Password</h4>
<p>Follow the link and set a new secure password</p>
</div>
</div>
</div>
<div class="answer-meta">
<span class="last-updated">Last updated: January 18, 2024</span>
<div class="answer-actions">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Helpful
</button>
<button class="not-helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
Not helpful
</button>
</div>
</div>
</div>
</div>
<div class="faq-item" data-category="support" data-keywords="contact support help customer service">
<div class="faq-question">
<h3>How can I contact customer support?</h3>
<button class="toggle-btn" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
<div class="faq-answer">
<p>We're here to help! Contact our support team through multiple channels:</p>
<div class="contact-options">
<div class="contact-option">
<div class="contact-icon">📧</div>
<div class="contact-details">
<h4>Email Support</h4>
<p>support@example.com</p>
<span>Response within 24 hours</span>
</div>
</div>
<div class="contact-option">
<div class="contact-icon">💬</div>
<div class="contact-details">
<h4>Live Chat</h4>
<p>Available on our website</p>
<span>Mon-Fri 9AM-6PM EST</span>
</div>
</div>
<div class="contact-option">
<div class="contact-icon">📞</div>
<div class="contact-details">
<h4>Phone Support</h4>
<p>1-800-123-4567</p>
<span>Mon-Fri 9AM-6PM EST</span>
</div>
</div>
</div>
<div class="answer-meta">
<span class="last-updated">Last updated: January 12, 2024</span>
<div class="answer-actions">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Helpful
</button>
<button class="not-helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
Not helpful
</button>
</div>
</div>
</div>
</div>
<div class="faq-item" data-category="general" data-keywords="shipping delivery international worldwide">
<div class="faq-question">
<h3>Do you ship internationally?</h3>
<button class="toggle-btn" aria-expanded="false">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<polyline points="6,9 12,15 18,9"></polyline>
</svg>
</button>
</div>
<div class="faq-answer">
<p>Yes! We ship to over 50 countries worldwide. International shipping rates and delivery times vary by destination.</p>
<div class="shipping-info">
<div class="shipping-detail">
<strong>Shipping Costs:</strong>
<span>Calculated at checkout based on weight and destination</span>
</div>
<div class="shipping-detail">
<strong>Delivery Time:</strong>
<span>7-21 business days depending on location</span>
</div>
<div class="shipping-detail">
<strong>Tracking:</strong>
<span>Full tracking provided for all international orders</span>
</div>
</div>
<div class="answer-meta">
<span class="last-updated">Last updated: January 8, 2024</span>
<div class="answer-actions">
<button class="helpful-btn" data-helpful="true">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
Helpful
</button>
<button class="not-helpful-btn" data-helpful="false">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<path d="M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7-13h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.33 2H17"></path>
</svg>
Not helpful
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Styles
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
padding: 20px;
}
.searchable-faq-container {
max-width: 900px;
margin: 0 auto;
background: white;
border-radius: 16px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
}.faq-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px 30px;
text-align: center;
}
.faq-header h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 8px;
}
.faq-header p {
font-size: 1.1rem;
opacity: 0.9;
}.search-section {
padding: 30px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
}
.search-container {
position: relative;
margin-bottom: 20px;
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.search-input {
width: 100%;
padding: 16px 20px 16px 50px;
border: 2px solid #e2e8f0;
border-radius: 25px;
font-size: 16px;
background: white;
transition: all 0.3s ease;
}
.search-input:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.search-icon {
position: absolute;
left: 18px;
color: #94a3b8;
z-index: 2;
}
.voice-search-btn,
.clear-search-btn {
position: absolute;
right: 50px;
background: none;
border: none;
padding: 8px;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s ease;
color: #64748b;
}
.clear-search-btn {
right: 15px;
}
.voice-search-btn:hover,
.clear-search-btn:hover {
background: #f1f5f9;
color: #667eea;
}
.voice-search-btn.recording {
color: #ef4444;
animation: pulse 1s infinite;
}.search-suggestions,
.search-history {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
z-index: 10;
margin-top: 8px;
}
.suggestions-header,
.history-header {
padding: 12px 20px;
border-bottom: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 600;
color: #64748b;
}
.clear-history-btn {
background: none;
border: none;
color: #667eea;
cursor: pointer;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
transition: background 0.3s ease;
}
.clear-history-btn:hover {
background: #f1f5f9;
}
.suggestions-list,
.history-list {
max-height: 200px;
overflow-y: auto;
}
.suggestion-item,
.history-item {
padding: 12px 20px;
cursor: pointer;
transition: background 0.3s ease;
display: flex;
align-items: center;
gap: 12px;
}
.suggestion-item:hover,
.history-item:hover {
background: #f8fafc;
}
.suggestion-icon,
.history-icon {
color: #94a3b8;
flex-shrink: 0;
}.filters-container {
position: relative;
}
.filters-toggle {
background: white;
border: 2px solid #e2e8f0;
padding: 12px 16px;
border-radius: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #64748b;
transition: all 0.3s ease;
}
.filters-toggle:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.filters-toggle.active {
border-color: #667eea;
color: #667eea;
}
.filters-panel {
position: absolute;
top: 100%;
left: 0;
background: white;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 8px;
min-width: 300px;
z-index: 10;
}
.filter-group {
margin-bottom: 16px;
}
.filter-group:last-child {
margin-bottom: 0;
}
.filter-group label {
display: block;
font-size: 14px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}
.filter-group select {
width: 100%;
padding: 8px 12px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
background: white;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: #374151;
cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
margin: 0;
}.search-results-info {
padding: 20px 30px;
background: #f8fafc;
border-bottom: 1px solid #e2e8f0;
display: flex;
justify-content: space-between;
align-items: center;
}
.results-count {
font-size: 14px;
color: #64748b;
}
.search-time {
font-size: 12px;
color: #94a3b8;
}
.export-results-btn {
background: #667eea;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: background 0.3s ease;
}
.export-results-btn:hover {
background: #5a67d8;
}.faq-content {
padding: 30px;
}.no-results {
text-align: center;
padding: 60px 20px;
color: #64748b;
}
.no-results-icon {
font-size: 64px;
margin-bottom: 20px;
opacity: 0.5;
}
.no-results h3 {
font-size: 1.5rem;
color: #374151;
margin-bottom: 8px;
}
.no-results p {
margin-bottom: 24px;
}
.search-suggestions-inline {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.suggestion-tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
}
.suggestion-tag {
background: #f1f5f9;
color: #667eea;
padding: 6px 12px;
border-radius: 16px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
}
.suggestion-tag:hover {
background: #667eea;
color: white;
}.faq-items {
display: flex;
flex-direction: column;
gap: 16px;
}
.faq-item {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: #cbd5e1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.faq-item.highlighted {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.faq-question {
padding: 20px 24px;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: background 0.3s ease;
}
.faq-question:hover {
background: #f1f5f9;
}
.faq-question h3 {
font-size: 1.1rem;
font-weight: 600;
color: #1e293b;
margin: 0;
flex: 1;
}
.toggle-btn {
background: #667eea;
border: none;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
flex-shrink: 0;
}
.toggle-btn:hover {
background: #5a67d8;
transform: scale(1.05);
}
.toggle-btn svg {
color: white;
transition: transform 0.3s ease;
}
.faq-item.active .toggle-btn svg {
transform: rotate(180deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: white;
}
.faq-item.active .faq-answer {
max-height: 1000px;
padding: 0 24px 24px;
}
.faq-answer p {
color: #64748b;
line-height: 1.6;
margin-bottom: 16px;
}
.faq-answer ol {
color: #64748b;
line-height: 1.6;
margin: 16px 0;
padding-left: 20px;
}
.faq-answer li {
margin-bottom: 8px;
}.payment-methods {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
margin: 16px 0;
}
.payment-category {
background: #f8fafc;
padding: 16px;
border-radius: 8px;
border-left: 4px solid #667eea;
}
.payment-category h4 {
color: #374151;
margin-bottom: 8px;
font-size: 14px;
}
.payment-category ul {
margin: 0;
padding-left: 16px;
}
.payment-category li {
color: #64748b;
font-size: 14px;
margin-bottom: 4px;
}.reset-steps {
margin: 20px 0;
}
.step {
display: flex;
align-items: flex-start;
gap: 16px;
margin-bottom: 20px;
padding: 16px;
background: #f8fafc;
border-radius: 8px;
}
.step-number {
background: #667eea;
color: white;
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 14px;
flex-shrink: 0;
}
.step-content h4 {
color: #374151;
margin-bottom: 4px;
font-size: 16px;
}
.step-content p {
color: #64748b;
margin: 0;
font-size: 14px;
}.contact-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 16px;
margin: 20px 0;
}
.contact-option {
display: flex;
align-items: center;
gap: 16px;
padding: 20px;
background: #f8fafc;
border-radius: 12px;
border: 1px solid #e2e8f0;
transition: all 0.3s ease;
}
.contact-option:hover {
border-color: #667eea;
transform: translateY(-2px);
}
.contact-icon {
font-size: 24px;
flex-shrink: 0;
}
.contact-details h4 {
color: #374151;
margin-bottom: 4px;
font-size: 16px;
}
.contact-details p {
color: #667eea;
font-weight: 600;
margin-bottom: 2px;
font-size: 14px;
}
.contact-details span {
color: #64748b;
font-size: 12px;
}.shipping-info {
margin: 16px 0;
}
.shipping-detail {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
background: #f8fafc;
border-radius: 6px;
margin-bottom: 8px;
}
.shipping-detail strong {
color: #374151;
font-size: 14px;
}
.shipping-detail span {
color: #64748b;
font-size: 14px;
}.answer-meta {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
display: flex;
justify-content: space-between;
align-items: center;
}
.last-updated {
font-size: 12px;
color: #94a3b8;
}
.answer-actions {
display: flex;
gap: 8px;
}
.helpful-btn,
.not-helpful-btn {
background: none;
border: 1px solid #e2e8f0;
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
transition: all 0.3s ease;
color: #64748b;
}
.helpful-btn:hover {
border-color: #10b981;
color: #10b981;
background: #f0fdf4;
}
.not-helpful-btn:hover {
border-color: #ef4444;
color: #ef4444;
background: #fef2f2;
}
.helpful-btn.voted {
border-color: #10b981;
color: #10b981;
background: #f0fdf4;
}
.not-helpful-btn.voted {
border-color: #ef4444;
color: #ef4444;
background: #fef2f2;
}.search-highlight {
background: #fef08a;
padding: 2px 4px;
border-radius: 3px;
font-weight: 600;
}@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
.faq-item {
animation: fadeIn 0.3s ease;
}@media (max-width: 768px) {
body {
padding: 10px;
}
.searchable-faq-container {
border-radius: 12px;
}
.faq-header {
padding: 30px 20px;
}
.faq-header h1 {
font-size: 2rem;
}
.search-section {
padding: 20px;
}
.faq-content {
padding: 20px;
}
.faq-question {
padding: 16px 20px;
}
.faq-item.active .faq-answer {
padding: 0 20px 20px;
}
.filters-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
}
.payment-methods,
.contact-options {
grid-template-columns: 1fr;
}
.search-results-info {
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
}
@media (max-width: 480px) {
.faq-header h1 {
font-size: 1.75rem;
}
.search-input {
padding: 14px 16px 14px 45px;
font-size: 16px;
}
.voice-search-btn {
right: 45px;
}
.faq-question h3 {
font-size: 1rem;
}
.step {
flex-direction: column;
text-align: center;
}
}JavaScript Functionality
class SearchableFAQ {
constructor() {
this.searchInput = document.querySelector('.search-input');
this.faqItems = document.querySelectorAll('.faq-item');
this.searchSuggestions = document.querySelector('.search-suggestions');
this.searchHistory = document.querySelector('.search-history');
this.filtersToggle = document.querySelector('.filters-toggle');
this.filtersPanel = document.querySelector('.filters-panel');
this.noResults = document.querySelector('.no-results');
this.searchResultsInfo = document.querySelector('.search-results-info');
this.voiceSearchBtn = document.querySelector('.voice-search-btn');
this.clearSearchBtn = document.querySelector('.clear-search-btn');
this.searchTimeout = null;
this.searchHistory = this.loadSearchHistory();
this.popularSearches = ['account', 'payment', 'password', 'shipping', 'support'];
this.isVoiceSearchSupported = 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window;
this.init();
}
init() {
this.bindEvents();
this.setupVoiceSearch();
this.setupKeyboardNavigation();
this.populateSuggestions();
}
bindEvents() {
this.searchInput.addEventListener('input', (e) => {
this.handleSearchInput(e.target.value);
});
this.searchInput.addEventListener('focus', () => {
this.showSearchSuggestions();
});
this.searchInput.addEventListener('blur', (e) => {
setTimeout(() => {
if (!e.relatedTarget || !e.relatedTarget.closest('.search-suggestions, .search-history')) {
this.hideSearchSuggestions();
}
}, 150);
});
this.clearSearchBtn.addEventListener('click', () => {
this.clearSearch();
});
document.addEventListener('click', (e) => {
const faqQuestion = e.target.closest('.faq-question');
if (faqQuestion) {
this.toggleFAQItem(faqQuestion.parentElement);
}
const helpfulBtn = e.target.closest('.helpful-btn, .not-helpful-btn');
if (helpfulBtn) {
this.handleFeedback(helpfulBtn);
}
});
this.filtersToggle.addEventListener('click', () => {
this.toggleFilters();
});
document.addEventListener('change', (e) => {
if (e.target.matches('.category-filter, .sort-filter, .answered-only, .recent-only')) {
this.applyFilters();
}
});
document.querySelector('.export-results-btn')?.addEventListener('click', () => {
this.exportResults();
});
document.addEventListener('click', (e) => {
if (!e.target.closest('.search-container')) {
this.hideSearchSuggestions();
}
if (!e.target.closest('.filters-container')) {
this.hideFilters();
}
});
}
setupVoiceSearch() {
if (!this.isVoiceSearchSupported) {
this.voiceSearchBtn.style.display = 'none';
return;
}
this.voiceSearchBtn.addEventListener('click', () => {
this.startVoiceSearch();
});
}
setupKeyboardNavigation() {
document.addEventListener('keydown', (e) => {
if (e.target === this.searchInput) {
this.handleSearchKeyboard(e);
} else if (e.target.closest('.faq-question')) {
this.handleFAQKeyboard(e);
}
});
}
handleSearchInput(value) {
clearTimeout(this.searchTimeout);
this.clearSearchBtn.style.display = value ? 'block' : 'none';
this.searchTimeout = setTimeout(() => {
this.performSearch(value);
}, 300);
if (value.length > 0) {
this.updateSearchSuggestions(value);
} else {
this.showSearchSuggestions();
}
}
performSearch(query) {
const startTime = performance.now();
if (!query.trim()) {
this.showAllItems();
this.hideSearchResultsInfo();
return;
}
this.addToSearchHistory(query);
const results = this.fuzzySearch(query);
this.displaySearchResults(results, query);
const searchTime = performance.now() - startTime;
this.showSearchResultsInfo(results.length, searchTime, query);
this.trackSearch(query, results.length);
}
fuzzySearch(query) {
const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 0);
const results = [];
this.faqItems.forEach(item => {
const question = item.querySelector('h3').textContent.toLowerCase();
const answer = item.querySelector('.faq-answer').textContent.toLowerCase();
const keywords = item.dataset.keywords?.toLowerCase() || '';
const category = item.dataset.category?.toLowerCase() || '';
const searchText = `${question} ${answer} ${keywords} ${category}`;
let score = 0;
let matchedTerms = 0;
searchTerms.forEach(term => {
if (searchText.includes(term)) {
score += 10;
matchedTerms++;
}
const fuzzyScore = this.calculateFuzzyScore(term, searchText);
if (fuzzyScore > 0.6) {
score += fuzzyScore * 5;
matchedTerms++;
}
if (question.includes(term)) {
score += 5;
}
if (keywords.includes(term)) {
score += 3;
}
});
if (matchedTerms > 0) {
results.push({ item, score, matchedTerms });
}
});
return results.sort((a, b) => {
if (a.matchedTerms !== b.matchedTerms) {
return b.matchedTerms - a.matchedTerms;
}
return b.score - a.score;
});
}
calculateFuzzyScore(term, text) {
const words = text.split(' ');
let bestScore = 0;
words.forEach(word => {
const score = this.levenshteinSimilarity(term, word);
if (score > bestScore) {
bestScore = score;
}
});
return bestScore;
}
levenshteinSimilarity(a, b) {
const matrix = [];
for (let i = 0; i <= b.length; i++) {
matrix[i] = [i];
}
for (let j = 0; j <= a.length; j++) {
matrix[0][j] = j;
}
for (let i = 1; i <= b.length; i++) {
for (let j = 1; j <= a.length; j++) {
if (b.charAt(i - 1) === a.charAt(j - 1)) {
matrix[i][j] = matrix[i - 1][j - 1];
} else {
matrix[i][j] = Math.min(
matrix[i - 1][j - 1] + 1,
matrix[i][j - 1] + 1,
matrix[i - 1][j] + 1
);
}
}
}
const maxLength = Math.max(a.length, b.length);
return (maxLength - matrix[b.length][a.length]) / maxLength;
}
displaySearchResults(results, query) {
this.faqItems.forEach(item => {
item.style.display = 'none';
item.classList.remove('highlighted');
});
if (results.length === 0) {
this.showNoResults(query);
return;
}
this.hideNoResults();
results.forEach(({ item }) => {
item.style.display = 'block';
item.classList.add('highlighted');
this.highlightSearchTerms(item, query);
});
this.applyFilters();
}
highlightSearchTerms(item, query) {
const searchTerms = query.toLowerCase().split(' ').filter(term => term.length > 1);
const question = item.querySelector('h3');
const answer = item.querySelector('.faq-answer');
this.highlightInElement(question, searchTerms);
const textNodes = this.getTextNodes(answer);
textNodes.forEach(node => {
this.highlightInTextNode(node, searchTerms);
});
}
highlightInElement(element, terms) {
let html = element.innerHTML;
terms.forEach(term => {
const regex = new RegExp(`(${this.escapeRegex(term)})`, 'gi');
html = html.replace(regex, '<span class="search-highlight">$1</span>');
});
element.innerHTML = html;
}
highlightInTextNode(node, terms) {
let text = node.textContent;
let hasHighlight = false;
terms.forEach(term => {
const regex = new RegExp(`(${this.escapeRegex(term)})`, 'gi');
if (regex.test(text)) {
text = text.replace(regex, '<span class="search-highlight">$1</span>');
hasHighlight = true;
}
});
if (hasHighlight) {
const wrapper = document.createElement('span');
wrapper.innerHTML = text;
node.parentNode.replaceChild(wrapper, node);
}
}
getTextNodes(element) {
const textNodes = [];
const walker = document.createTreeWalker(
element,
NodeFilter.SHOW_TEXT,
null,
false
);
let node;
while (node = walker.nextNode()) {
if (node.textContent.trim()) {
textNodes.push(node);
}
}
return textNodes;
}
escapeRegex(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
showAllItems() {
this.faqItems.forEach(item => {
item.style.display = 'block';
item.classList.remove('highlighted');
this.removeHighlights(item);
});
this.hideNoResults();
}
removeHighlights(item) {
const highlights = item.querySelectorAll('.search-highlight');
highlights.forEach(highlight => {
const parent = highlight.parentNode;
parent.replaceChild(document.createTextNode(highlight.textContent), highlight);
parent.normalize();
});
}
showNoResults(query) {
this.noResults.style.display = 'block';
this.populateInlineSuggestions();
}
hideNoResults() {
this.noResults.style.display = 'none';
}
showSearchResultsInfo(count, time, query) {
this.searchResultsInfo.style.display = 'flex';
const resultsCount = this.searchResultsInfo.querySelector('.results-count');
const searchTime = this.searchResultsInfo.querySelector('.search-time');
resultsCount.textContent = `${count} result${count !== 1 ? 's' : ''} for "${query}"`;
searchTime.textContent = `Search completed in ${time.toFixed(2)}ms`;
}
hideSearchResultsInfo() {
this.searchResultsInfo.style.display = 'none';
}
toggleFAQItem(item) {
const isActive = item.classList.contains('active');
if (isActive) {
item.classList.remove('active');
item.querySelector('.toggle-btn').setAttribute('aria-expanded', 'false');
} else {
item.classList.add('active');
item.querySelector('.toggle-btn').setAttribute('aria-expanded', 'true');
setTimeout(() => {
const rect = item.getBoundingClientRect();
if (rect.bottom > window.innerHeight) {
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
}, 300);
}
}
handleFeedback(button) {
const isHelpful = button.classList.contains('helpful-btn');
const answerActions = button.parentElement;
const helpfulBtn = answerActions.querySelector('.helpful-btn');
const notHelpfulBtn = answerActions.querySelector('.not-helpful-btn');
helpfulBtn.classList.remove('voted');
notHelpfulBtn.classList.remove('voted');
button.classList.add('voted');
this.trackFeedback(button.closest('.faq-item'), isHelpful);
this.showFeedbackMessage(isHelpful);
}
showFeedbackMessage(isHelpful) {
const message = isHelpful ? 'Thank you for your feedback!' : 'Thanks! We\'ll improve this answer.';
const messageEl = document.createElement('div');
messageEl.textContent = message;
messageEl.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: #10b981;
color: white;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
z-index: 1000;
animation: fadeIn 0.3s ease;
`;
document.body.appendChild(messageEl);
setTimeout(() => {
messageEl.remove();
}, 3000);
}
toggleFilters() {
const isVisible = this.filtersPanel.style.display === 'block';
if (isVisible) {
this.hideFilters();
} else {
this.showFilters();
}
}
showFilters() {
this.filtersPanel.style.display = 'block';
this.filtersToggle.classList.add('active');
this.filtersToggle.setAttribute('aria-expanded', 'true');
}
hideFilters() {
this.filtersPanel.style.display = 'none';
this.filtersToggle.classList.remove('active');
this.filtersToggle.setAttribute('aria-expanded', 'false');
}
applyFilters() {
const categoryFilter = document.querySelector('.category-filter').value;
const sortFilter = document.querySelector('.sort-filter').value;
const answeredOnly = document.querySelector('.answered-only').checked;
const recentOnly = document.querySelector('.recent-only').checked;
let visibleItems = Array.from(this.faqItems).filter(item => {
const isVisible = item.style.display !== 'none';
if (!isVisible) return false;
if (categoryFilter && item.dataset.category !== categoryFilter) {
return false;
}
if (answeredOnly) {
}
if (recentOnly) {
}
return true;
});
this.faqItems.forEach(item => {
if (visibleItems.includes(item)) {
item.style.display = 'block';
} else if (item.style.display !== 'none') {
item.style.display = 'none';
}
});
this.sortItems(visibleItems, sortFilter);
if (this.searchInput.value.trim()) {
const resultsCount = this.searchResultsInfo.querySelector('.results-count');
resultsCount.textContent = `${visibleItems.length} result${visibleItems.length !== 1 ? 's' : ''} for "${this.searchInput.value}"`;
}
}
sortItems(items, sortBy) {
const container = document.querySelector('.faq-items');
items.sort((a, b) => {
switch (sortBy) {
case 'alphabetical':
const titleA = a.querySelector('h3').textContent;
const titleB = b.querySelector('h3').textContent;
return titleA.localeCompare(titleB);
case 'date':
return 0;
case 'popularity':
return 0;
default: // relevance
return 0;
}
});
items.forEach(item => {
container.appendChild(item);
});
}
startVoiceSearch() {
if (!this.isVoiceSearchSupported) return;
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = 'en-US';
this.voiceSearchBtn.classList.add('recording');
recognition.onresult = (event) => {
const transcript = event.results[0][0].transcript;
this.searchInput.value = transcript;
this.handleSearchInput(transcript);
};
recognition.onerror = (event) => {
console.error('Speech recognition error:', event.error);
this.voiceSearchBtn.classList.remove('recording');
};
recognition.onend = () => {
this.voiceSearchBtn.classList.remove('recording');
};
recognition.start();
}
clearSearch() {
this.searchInput.value = '';
this.clearSearchBtn.style.display = 'none';
this.showAllItems();
this.hideSearchResultsInfo();
this.hideSearchSuggestions();
this.searchInput.focus();
}
showSearchSuggestions() {
if (this.searchInput.value.trim()) return;
this.searchSuggestions.style.display = 'block';
this.searchHistory.style.display = 'none';
if (this.searchHistory.length > 0) {
this.showSearchHistory();
}
}
hideSearchSuggestions() {
this.searchSuggestions.style.display = 'none';
this.searchHistory.style.display = 'none';
}
updateSearchSuggestions(query) {
const suggestions = this.popularSearches.filter(search =>
search.toLowerCase().includes(query.toLowerCase())
);
if (suggestions.length > 0) {
this.displaySuggestions(suggestions);
this.searchSuggestions.style.display = 'block';
} else {
this.searchSuggestions.style.display = 'none';
}
}
displaySuggestions(suggestions) {
const suggestionsList = this.searchSuggestions.querySelector('.suggestions-list');
suggestionsList.innerHTML = '';
suggestions.forEach(suggestion => {
const item = document.createElement('div');
item.className = 'suggestion-item';
item.innerHTML = `
<svg class="suggestion-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="11" cy="11" r="8"></circle>
<path d="m21 21-4.35-4.35"></path>
</svg>
<span>${suggestion}</span>
`;
item.addEventListener('click', () => {
this.searchInput.value = suggestion;
this.handleSearchInput(suggestion);
this.hideSearchSuggestions();
});
suggestionsList.appendChild(item);
});
}
showSearchHistory() {
if (this.searchHistory.length === 0) return;
this.searchHistory.style.display = 'block';
this.searchSuggestions.style.display = 'none';
const historyList = this.searchHistory.querySelector('.history-list');
historyList.innerHTML = '';
this.searchHistory.slice(0, 5).forEach(search => {
const item = document.createElement('div');
item.className = 'history-item';
item.innerHTML = `
<svg class="history-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
<circle cx="12" cy="12" r="3"></circle>
<path d="M12 1v6M12 17v6M4.22 4.22l4.24 4.24M15.54 15.54l4.24 4.24M1 12h6M17 12h6M4.22 19.78l4.24-4.24M15.54 8.46l4.24-4.24"></path>
</svg>
<span>${search}</span>
`;
item.addEventListener('click', () => {
this.searchInput.value = search;
this.handleSearchInput(search);
this.hideSearchSuggestions();
});
historyList.appendChild(item);
});
const clearBtn = this.searchHistory.querySelector('.clear-history-btn');
clearBtn.addEventListener('click', () => {
this.clearSearchHistory();
});
}
populateSuggestions() {
this.displaySuggestions(this.popularSearches);
}
populateInlineSuggestions() {
const suggestionTags = this.noResults.querySelector('.suggestion-tags');
suggestionTags.innerHTML = '';
this.popularSearches.forEach(suggestion => {
const tag = document.createElement('span');
tag.className = 'suggestion-tag';
tag.textContent = suggestion;
tag.addEventListener('click', () => {
this.searchInput.value = suggestion;
this.handleSearchInput(suggestion);
});
suggestionTags.appendChild(tag);
});
}
addToSearchHistory(query) {
const trimmedQuery = query.trim();
if (!trimmedQuery || this.searchHistory.includes(trimmedQuery)) return;
this.searchHistory.unshift(trimmedQuery);
this.searchHistory = this.searchHistory.slice(0, 10); // Keep only last 10
this.saveSearchHistory();
}
loadSearchHistory() {
try {
return JSON.parse(localStorage.getItem('faq-search-history') || '[]');
} catch {
return [];
}
}
saveSearchHistory() {
try {
localStorage.setItem('faq-search-history', JSON.stringify(this.searchHistory));
} catch {
}
}
clearSearchHistory() {
this.searchHistory = [];
this.saveSearchHistory();
this.hideSearchSuggestions();
}
handleSearchKeyboard(e) {
const suggestions = document.querySelectorAll('.suggestion-item, .history-item');
const currentFocus = document.querySelector('.suggestion-item.focused, .history-item.focused');
if (e.key === 'ArrowDown') {
e.preventDefault();
if (currentFocus) {
currentFocus.classList.remove('focused');
const next = currentFocus.nextElementSibling;
if (next) {
next.classList.add('focused');
}
} else if (suggestions.length > 0) {
suggestions[0].classList.add('focused');
}
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (currentFocus) {
currentFocus.classList.remove('focused');
const prev = currentFocus.previousElementSibling;
if (prev) {
prev.classList.add('focused');
}
}
} else if (e.key === 'Enter' && currentFocus) {
e.preventDefault();
currentFocus.click();
} else if (e.key === 'Escape') {
this.hideSearchSuggestions();
}
}
handleFAQKeyboard(e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
e.target.click();
}
}
exportResults() {
const visibleItems = Array.from(this.faqItems).filter(item =>
item.style.display !== 'none'
);
const exportData = visibleItems.map(item => {
const question = item.querySelector('h3').textContent;
const answer = item.querySelector('.faq-answer p').textContent;
return { question, answer };
});
const content = exportData.map(item =>
`Q: ${item.question}\n\nA: ${item.answer}\n\n${'='.repeat(50)}\n\n`
).join('');
const blob = new Blob([content], { type: 'text/plain' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `faq-search-results-${new Date().toISOString().split('T')[0]}.txt`;
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
trackSearch(query, resultCount) {
console.log('Search tracked:', { query, resultCount, timestamp: new Date() });
}
trackFeedback(item, isHelpful) {
const question = item.querySelector('h3').textContent;
console.log('Feedback tracked:', { question, isHelpful, timestamp: new Date() });
}
}
document.addEventListener('DOMContentLoaded', () => {
new SearchableFAQ();
});Usage Instructions
- Basic Search: Type in the search box to find relevant FAQ items
- Voice Search: Click the microphone icon to search using voice (Chrome/Edge)
- Filters: Use the filter button to narrow results by category, sort order, etc.
- Keyboard Navigation: Use arrow keys to navigate search suggestions
- Export: Click the export button to save search results as a text file
- Feedback: Use the helpful/not helpful buttons to rate answers
Customization
- Search Categories: Modify the
data-categoryattributes and filter options - Keywords: Add relevant keywords to
data-keywordsfor better search results - Styling: Customize colors, fonts, and animations in the CSS
- Search Algorithm: Adjust fuzzy search parameters for different matching behavior
- Analytics: Implement real tracking in the
trackSearchandtrackFeedbackmethods
Browser Support
- Modern Browsers: Full functionality in Chrome, Firefox, Safari, Edge
- Voice Search: Available in Chrome and Edge
- Fallbacks: Graceful degradation for older browsers
Performance Features
- Debounced Search: Prevents excessive API calls during typing
- Fuzzy Matching: Handles typos and partial matches
- Efficient DOM Updates: Minimizes reflows and repaints
- Local Storage: Persists search history across sessions
HTML
64
lines
CSS
181
lines
JavaScript
96
lines
<div class="searchable-faq-container">
<div class="faq-header">
<h1>Searchable FAQ</h1>
<p>Find answers quickly with our advanced search</p>
</div>
<div class="search-section">
<div class="search-input-wrapper">
<input type="text" id="searchInput" placeholder="Search for answers..." autocomplete="off">
<div class="search-suggestions" id="searchSuggestions"></div>
</div>
<div class="search-stats" id="searchStats">
<span id="resultCount">12 results found</span>
</div>
</div>
<div class="faq-list" id="faqList">
<div class="faq-item" data-keywords="account login password reset">
<div class="faq-question">
<h3>How do I reset my password?</h3>
<span class="expand-icon">▼</span>
</div>
<div class="faq-answer">
<p>To reset your password, click on the 'Forgot Password' link on the login page and follow the instructions sent to your email.</p>
</div>
</div>
<div class="faq-item" data-keywords="billing payment subscription plan">
<div class="faq-question">
<h3>How does billing work?</h3>
<span class="expand-icon">▼</span>
</div>
<div class="faq-answer">
<p>Billing is processed automatically based on your subscription plan. You'll receive an invoice via email before each billing cycle.</p>
</div>
</div>
<div class="faq-item" data-keywords="api integration development technical">
<div class="faq-question">
<h3>How do I integrate with your API?</h3>
<span class="expand-icon">▼</span>
</div>
<div class="faq-answer">
<p>Our API documentation is available in your dashboard. You'll need to generate an API key and follow the integration guide.</p>
</div>
</div>
<div class="faq-item" data-keywords="support help contact customer service">
<div class="faq-question">
<h3>How can I contact support?</h3>
<span class="expand-icon">▼</span>
</div>
<div class="faq-answer">
<p>You can reach our support team through live chat, email, or by submitting a ticket through your dashboard.</p>
</div>
</div>
</div>
<div class="no-results" id="noResults" style="display: none;">
<h3>No results found</h3>
<p>Try adjusting your search terms or browse our categories.</p>
</div>
</div>