Centro de Fragmentos de Código
interactive
advanced
faq
search
filter
questions
answers
autocompletar
Categoría · Interactivo Nivel de Dificultad · Avanzado Publicado el · 20 de enero de 2025

Componente FAQ con Búsqueda

Un componente FAQ avanzado con búsqueda con filtrado en tiempo real, sugerencias de búsqueda y capacidades de búsqueda inteligente

#faq #search #filter #questions #answers #autocompletar

Diseño Responsivo

Sí

Soporte para Modo Oscuro

No

líneas

—

Compatibilidad del Navegador

No

Componente FAQ con Búsqueda

Un componente FAQ avanzado con búsqueda con filtrado en tiempo real, sugerencias de búsqueda, capacidades de búsqueda inteligente y análisis completo de búsqueda.

Características

  • Búsqueda en Tiempo Real: Filtrado instantáneo mientras escribes con entrada debounced
  • Búsqueda Inteligente: Coincidencia difusa y tolerancia a errores tipográficos para mejores resultados
  • Sugerencias de Búsqueda: Autocompletado con términos de búsqueda populares
  • Filtros Avanzados: Opciones de filtrado por categoría, fecha y relevancia
  • Historial de Búsqueda: Búsquedas recientes con acceso rápido
  • Resultados Resaltados: Resaltado de términos de búsqueda en preguntas y respuestas
  • Análisis de Búsqueda: Seguimiento de búsquedas populares y comportamiento del usuario
  • Navegación por Teclado: Soporte completo de teclado para búsqueda y resultados
  • Búsqueda por Voz: Capacidad de búsqueda de voz a texto
  • Exportar Resultados: Guardar resultados de búsqueda como PDF o texto
  • Diseño Responsivo: Funciona perfectamente en todos los tamaños de dispositivo
  • Accesibilidad: Soporte completo ARIA y compatibilidad con lectores de pantalla

Estructura HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Componente FAQ con Búsqueda</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="searchable-faq-container">
        
        <div class="faq-header">
            <h1>FAQ con Búsqueda</h1>
            <p>Encuentra respuestas rápidamente con nuestro sistema de búsqueda inteligente</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="Buscar preguntas, respuestas o temas..."
                           autocomplete="off"
                           aria-label="Buscar FAQ">
                    
                    <button class="voice-search-btn" 
                            aria-label="Búsqueda por voz"
                            title="Búsqueda por voz">
                        <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="Limpiar búsqueda"
                            title="Limpiar búsqueda"
                            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>Búsquedas populares</span>
                    </div>
                    <div class="suggestions-list"></div>
                </div>
                
                
                <div class="search-history" style="display: none;">
                    <div class="history-header">
                        <span>Búsquedas recientes</span>
                        <button class="clear-history-btn">Limpiar</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>Filtros</span>
                </button>
                
                <div class="filters-panel" style="display: none;">
                    <div class="filter-group">
                        <label>Categoría</label>
                        <select class="category-filter">
                            <option value="">Todas las Categorías</option>
                            <option value="general">General</option>
                            <option value="billing">Facturación</option>
                            <option value="technical">Técnico</option>
                            <option value="support">Soporte</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Ordenar por</label>
                        <select class="sort-filter">
                            <option value="relevance">Relevancia</option>
                            <option value="date">Fecha</option>
                            <option value="popularity">Popularidad</option>
                            <option value="alphabetical">Alfabético</option>
                        </select>
                    </div>
                    
                    <div class="filter-group">
                        <label>Mostrar solo</label>
                        <div class="checkbox-group">
                            <label class="checkbox-label">
                                <input type="checkbox" class="answered-only">
                                <span>Preguntas respondidas</span>
                            </label>
                            <label class="checkbox-label">
                                <input type="checkbox" class="recent-only">
                                <span>Actualizaciones recientes</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>
                Exportar Resultados
            </button>
        </div>
        
        
        <div class="faq-content">
            
            <div class="no-results" style="display: none;">
                <div class="no-results-icon">🔍</div>
                <h3>No se encontraron resultados</h3>
                <p>Intenta ajustar tus términos de búsqueda o navega por todas las preguntas a continuación.</p>
                <div class="search-suggestions-inline">
                    <span>Búsquedas populares:</span>
                    <div class="suggestion-tags"></div>
                </div>
            </div>
            
            
            <div class="faq-items">
                <div class="faq-item" data-category="general" data-keywords="cuenta registro crear perfil">
                    <div class="faq-question">
                        <h3>¿Cómo creo una cuenta?</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>Crear una cuenta es simple y solo toma unos minutos. Sigue estos pasos:</p>
                        <ol>
                            <li>Haz clic en el botón "Registrarse" en la esquina superior derecha</li>
                            <li>Ingresa tu dirección de correo electrónico y crea una contraseña segura</li>
                            <li>Verifica tu dirección de correo electrónico haciendo clic en el enlace que te enviamos</li>
                            <li>Completa tu perfil con información básica</li>
                            <li>Comienza a usar todas nuestras funciones inmediatamente</li>
                        </ol>
                        <div class="answer-meta">
                            <span class="last-updated">Última actualización: 15 de enero de 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>
                                    Útil
                                </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>
                                    No útil
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item" data-category="billing" data-keywords="métodos pago tarjeta crédito paypal facturación">
                    <div class="faq-question">
                        <h3>¿Qué métodos de pago aceptan?</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>Aceptamos todos los métodos de pago principales para hacer tu experiencia conveniente:</p>
                        <div class="payment-methods">
                            <div class="payment-category">
                                <h4>Tarjetas de Crédito y Débito</h4>
                                <ul>
                                    <li>Visa</li>
                                    <li>MasterCard</li>
                                    <li>American Express</li>
                                    <li>Discover</li>
                                </ul>
                            </div>
                            <div class="payment-category">
                                <h4>Billeteras Digitales</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">Última actualización: 10 de enero de 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>
                                    Útil
                                </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>
                                    No útil
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item" data-category="technical" data-keywords="contraseña restablecer olvidé login seguridad">
                    <div class="faq-question">
                        <h3>¿Cómo restablezco mi contraseña?</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>Si has olvidado tu contraseña, puedes restablecerla fácilmente:</p>
                        <div class="reset-steps">
                            <div class="step">
                                <div class="step-number">1</div>
                                <div class="step-content">
                                    <h4>Ve a la Página de Inicio de Sesión</h4>
                                    <p>Haz clic en "Olvidé mi Contraseña" en la pantalla de inicio de sesión</p>
                                </div>
                            </div>
                            <div class="step">
                                <div class="step-number">2</div>
                                <div class="step-content">
                                    <h4>Ingresa tu Correo</h4>
                                    <p>Proporciona la dirección de correo electrónico asociada con tu cuenta</p>
                                </div>
                            </div>
                            <div class="step">
                                <div class="step-number">3</div>
                                <div class="step-content">
                                    <h4>Revisa tu Correo</h4>
                                    <p>Busca un enlace para restablecer la contraseña en tu bandeja de entrada</p>
                                </div>
                            </div>
                            <div class="step">
                                <div class="step-number">4</div>
                                <div class="step-content">
                                    <h4>Crea una Nueva Contraseña</h4>
                                    <p>Sigue el enlace y establece una nueva contraseña segura</p>
                                </div>
                            </div>
                        </div>
                        <div class="answer-meta">
                            <span class="last-updated">Última actualización: 18 de enero de 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>
                                    Útil
                                </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>
                                    No útil
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item" data-category="support" data-keywords="contacto soporte ayuda servicio cliente">
                    <div class="faq-question">
                        <h3>¿Cómo puedo contactar al soporte al cliente?</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>¡Estamos aquí para ayudar! Contacta a nuestro equipo de soporte a través de múltiples canales:</p>
                        <div class="contact-options">
                            <div class="contact-option">
                                <div class="contact-icon">📧</div>
                                <div class="contact-details">
                                    <h4>Soporte por Correo</h4>
                                    <p>soporte@ejemplo.com</p>
                                    <span>Respuesta en 24 horas</span>
                                </div>
                            </div>
                            <div class="contact-option">
                                <div class="contact-icon">💬</div>
                                <div class="contact-details">
                                    <h4>Chat en Vivo</h4>
                                    <p>Disponible en nuestro sitio web</p>
                                    <span>Lun-Vie 9AM-6PM EST</span>
                                </div>
                            </div>
                            <div class="contact-option">
                                <div class="contact-icon">📞</div>
                                <div class="contact-details">
                                    <h4>Soporte Telefónico</h4>
                                    <p>1-800-123-4567</p>
                                    <span>Lun-Vie 9AM-6PM EST</span>
                                </div>
                            </div>
                        </div>
                        <div class="answer-meta">
                            <span class="last-updated">Última actualización: 12 de enero de 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>
                                    Útil
                                </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>
                                    No útil
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="faq-item" data-category="general" data-keywords="envío entrega internacional mundial">
                    <div class="faq-question">
                        <h3>¿Realizan envíos internacionales?</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>¡Sí! Enviamos a más de 50 países en todo el mundo. Las tarifas de envío internacional y los tiempos de entrega varían según el destino.</p>
                        <div class="shipping-info">
                            <div class="shipping-detail">
                                <strong>Costos de Envío:</strong>
                                <span>Calculados al finalizar la compra según el peso y destino</span>
                            </div>
                            <div class="shipping-detail">
                                <strong>Tiempo de Entrega:</strong>
                                <span>7-21 días hábiles dependiendo de la ubicación</span>
                            </div>
                            <div class="shipping-detail">
                                <strong>Seguimiento:</strong>
                                <span>Seguimiento completo proporcionado para todos los pedidos internacionales</span>
                            </div>
                        </div>
                        <div class="answer-meta">
                            <span class="last-updated">Última actualización: 8 de enero de 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>
                                    Útil
                                </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>
                                    No útil
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

Estilos CSS

Funcionalidad JavaScript

class SearchableFAQ {
    constructor() {

        this.popularSearches = ['cuenta', 'pago', 'contraseña', 'envío', 'soporte'];

    }

}

Instrucciones de Uso

  1. Búsqueda Básica: Escribe en el cuadro de búsqueda para encontrar elementos FAQ relevantes
  2. Búsqueda por Voz: Haz clic en el ícono del micrófono para buscar usando voz (Chrome/Edge)
  3. Filtros: Usa el botón de filtro para reducir resultados por categoría, orden, etc.
  4. Navegación por Teclado: Usa las teclas de flecha para navegar por las sugerencias de búsqueda
  5. Exportar: Haz clic en el botón exportar para guardar resultados de búsqueda como archivo de texto
  6. Comentarios: Usa los botones útil/no útil para calificar respuestas

Personalización

  • Categorías de Búsqueda: Modifica los atributos data-category y opciones de filtro
  • Palabras Clave: Agrega palabras clave relevantes a data-keywords para mejores resultados de búsqueda
  • Estilo: Personaliza colores, fuentes y animaciones en el CSS
  • Algoritmo de Búsqueda: Ajusta parámetros de búsqueda difusa para diferentes comportamientos de coincidencia
  • Análisis: Implementa seguimiento real en los métodos trackSearch y trackFeedback

Soporte de Navegadores

  • Navegadores Modernos: Funcionalidad completa en Chrome, Firefox, Safari, Edge
  • Búsqueda por Voz: Disponible en Chrome y Edge
  • Respaldos: Degradación elegante para navegadores más antiguos

Características de Rendimiento

  • Búsqueda Debounced: Previene llamadas API excesivas durante la escritura
  • Coincidencia Difusa: Maneja errores tipográficos y coincidencias parciales
  • Actualizaciones DOM Eficientes: Minimiza reflujos y repintados
  • Almacenamiento Local: Persiste historial de búsqueda entre sesiones

Fragmentos de Código Relacionados

Explora packs de plantillas

¿Necesitas bloques más grandes? Descubre landings y colecciones de componentes.

Abrir la biblioteca de plantillas ->