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
3
Compatibilidad del Navegador
No
Vista Previa en Vivo
Interactúa con el componente sin salir de la página.
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">
<!-- Encabezado -->
<div class="faq-header">
<h1>FAQ con Búsqueda</h1>
<p>Encuentra respuestas rápidamente con nuestro sistema de búsqueda inteligente</p>
</div>
<!-- Sección de Búsqueda -->
<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>
<!-- Sugerencias de Búsqueda -->
<div class="search-suggestions" style="display: none;">
<div class="suggestions-header">
<span>Búsquedas populares</span>
</div>
<div class="suggestions-list"></div>
</div>
<!-- Historial de Búsqueda -->
<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>
<!-- Filtros Avanzados -->
<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>
<!-- Información de Resultados de Búsqueda -->
<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>
<!-- Contenido FAQ -->
<div class="faq-content">
<!-- Mensaje Sin Resultados -->
<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>
<!-- Elementos FAQ -->
<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
/* Los estilos CSS son los mismos que en la versión en inglés */Funcionalidad JavaScript
/* El JavaScript es el mismo que en la versión en inglés,
pero con términos de búsqueda populares en español */
class SearchableFAQ {
constructor() {
// ... código igual ...
this.popularSearches = ['cuenta', 'pago', 'contraseña', 'envío', 'soporte'];
// ... resto del código igual ...
}
// ... resto de métodos iguales ...
}Instrucciones de Uso
- Búsqueda Básica: Escribe en el cuadro de búsqueda para encontrar elementos FAQ relevantes
- Búsqueda por Voz: Haz clic en el ícono del micrófono para buscar usando voz (Chrome/Edge)
- Filtros: Usa el botón de filtro para reducir resultados por categoría, orden, etc.
- Navegación por Teclado: Usa las teclas de flecha para navegar por las sugerencias de búsqueda
- Exportar: Haz clic en el botón exportar para guardar resultados de búsqueda como archivo de texto
- Comentarios: Usa los botones útil/no útil para calificar respuestas
Personalización
- Categorías de Búsqueda: Modifica los atributos
data-categoryy opciones de filtro - Palabras Clave: Agrega palabras clave relevantes a
data-keywordspara 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
trackSearchytrackFeedback
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
HTML
1
líneas
CSS
1
líneas
JavaScript
1
líneas
<!-- HTML content will be added here -->