Menu déroulant avec recherche
Tapez pour réduire la liste : les lettres correspondantes sont surlignées dans chaque option.
Réglages
Code
<div class="uv-fds"><button class="tg">Choisir une ville <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="Rechercher..."></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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Filtres
Où l’utiliser
Très adapté à un portail immobilier où l’on choisit une ville avant de parcourir appartements et maisons. Au-delà d’une douzaine de villes, faire défiler devient pénible ; taper trois lettres va plus vite, et le surlignage montre pourquoi chaque résultat apparaît. Il sert aussi dans une appli de livraison pour choisir sa zone. On parle souvent de liste déroulante avec recherche.
Le champ de recherche prend le focus dès l’ouverture du menu, on peut donc taper directement. Placez en tête les villes les plus demandées. Et vérifiez que le texte reste lisible avec la couleur de surlignage derrière.