HTML + CSSFiltros
Desplegable con buscador
Escribe para acortar la lista y las letras que coinciden se resaltan en cada opción.
Ajustes
16px
1x
Código
<div class="uv-fds"><button class="tg">Elegir ciudad <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></i></button><div class="mn"><label class="sb"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4.3-4.3"/></svg><input placeholder="Buscar..."></label><div class="ls"><button data-v="Madrid">Madrid</button><button data-v="Barcelona">Barcelona</button><button data-v="Valencia">Valencia</button><button data-v="Sevilla">Sevilla</button><button data-v="Bilbao">Bilbao</button><button data-v="Málaga">Málaga</button><button data-v="Zaragoza">Zaragoza</button></div></div></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
Dónde usarlo
Encaja en un portal inmobiliario donde la gente elige ciudad antes de ver pisos y casas. Con una docena de ciudades o más, bajar con la rueda aburre; escribir tres letras es más rápido, y el resaltado muestra la coincidencia. También sirve en una app de reparto para elegir zona. Se busca como desplegable con buscador o combobox.
El campo de búsqueda recibe el foco en cuanto se abre el menú, así que se puede escribir directamente. Pon arriba las ciudades más pedidas. Y comprueba que el texto se lee bien con el color de resaltado detrás.