🔍 Filtro de búsqueda en tiempo real
📝 Cómo usar
Esta página proporciona un filtro de búsqueda en tiempo real dentro de la página.
- Por ejemplo, si escribes "manzana", se mostrarán elementos como "Manzana" o "Jugo de manzana" al instante.
- Se admiten variaciones como "MANZANA", "manzana", etc.
- El texto se normaliza automáticamente para permitir una búsqueda flexible.
Puedes copiar y reutilizar libremente el código HTML a continuación en tus propios sitios o materiales educativos.
- Manzana
- Plátano
- Mandarina
- Uvas
- Sandía
- Piña
- Melón
- Jugo de manzana
- OpenAI
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<title>Filtro de búsqueda en tiempo real</title>
<style>
body { font-family: sans-serif; padding: 2rem; max-width: 600px; margin: auto; }
input[type="text"] {
width: 100%; padding: 10px; font-size: 1.1rem; margin-bottom: 1rem;
border: 1px solid #ccc; border-radius: 5px;
}
ul { list-style-type: none; padding: 0; }
li { padding: 8px; border-bottom: 1px solid #ddd; }
.hidden { display: none; }
</style>
</head>
<body>
<h1>🔍 Filtro de búsqueda en tiempo real</h1>
<input type="text" id="filterInput" placeholder="Introduce una palabra clave (ej: manzana o plátano)">
<ul id="itemList">
<li>Manzana</li>
<li>Plátano</li>
<li>Mandarina</li>
<li>Uvas</li>
<li>Sandía</li>
<li>Piña</li>
<li>Melón</li>
<li>Jugo de manzana</li>
<li>OpenAI</li>
</ul>
<script>
const input = document.getElementById("filterInput");
const items = document.querySelectorAll("#itemList li");
input.addEventListener("input", () => {
const keyword = input.value.trim().toLowerCase().normalize("NFKC");
items.forEach(item => {
const text = item.textContent.toLowerCase().normalize("NFKC");
item.classList.toggle("hidden", !text.includes(keyword));
});
});
</script>
</body>
</html>
🔧 Filtro en tiempo real más inteligente: manejo de variaciones y terminaciones
Los filtros en tiempo real tradicionales suelen requerir una coincidencia exacta entre lo que escribe el usuario y los elementos de la lista.
Esto puede provocar que no aparezcan resultados si hay pequeñas diferencias en las terminaciones de las palabras, como “miru” (見る), “mita” (見た) o “mirar”.
Estas diferencias sutiles —llamadas variaciones ortográficas o flexivas— pueden afectar la experiencia de búsqueda.
Esta plantilla soluciona eso combinando la conversión katakana ⇔ hiragana con:
- Normalización de ancho completo y medio (
normalize("NFKC")) - Conversión a minúsculas (
.toLowerCase()) - Coincidencia parcial basada en la raíz de las palabras
Con este enfoque, al escribir algo como “jugo de mikan” también se mostrarán resultados como “mikan” (みかん), “100% mikan” o “con sabor a mikan”.
Esto mejora considerablemente la precisión y tolerancia de los resultados.
Este tipo de mejora es ideal para aplicaciones educativas o herramientas de búsqueda de productos, donde los usuarios pueden usar diferentes formas de escribir.
No solo mejora la experiencia de usuario (UX), sino que también contribuye a una mejor accesibilidad para todo tipo de personas y contextos.