- Madrid
- Málaga
- Barcelona
- Bilbao
- Valencia
- Sevilla
- Salamanca
- Santander
- Granada
- Gijón
Sin resultados
Búsqueda que resalta coincidencias
Escribe y la lista se filtra al momento, con las letras que coinciden resaltadas en cada resultado.
Ajustes
Código
<div class="uv-fls"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg><input type="search" placeholder="Buscar ciudad" aria-label="Buscar ciudad" value="sa"></label><ul><li>Madrid</li><li>Málaga</li><li>Barcelona</li><li>Bilbao</li><li>Valencia</li><li>Sevilla</li><li>Salamanca</li><li>Santander</li><li>Granada</li><li>Gijón</li></ul><p class="em">Sin resultados</p></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Filtrar una lista corta mientras se escribe es una de las interacciones pequeñas más útiles, y resaltar la coincidencia explica por qué se queda cada elemento. Este buscador filtra una lista de ciudades con cada tecla, ignora los acentos para que malaga encuentre Málaga, envuelve la parte que coincide en una marca de color y muestra un mensaje cuando no hay nada.
El script ocupa una docena de líneas y construye el resaltado con nodos del DOM, nunca con innerHTML, así que lo que se escribe es seguro. Cambia la lista por productos, etiquetas o personas.