- Madrid
- Málaga
- Barcelona
- Bilbao
- Valencia
- Sevilla
- Salamanca
- Santander
- Granada
- Gijón
Sin resultados
Recherche en direct avec surlignage
Tape et la liste se filtre aussitôt, avec les lettres correspondantes surlignées dans chaque résultat.
Réglages
Code
<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="Rechercher une ville" aria-label="Rechercher une ville" 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">Aucun résultat</p></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
Voir tout : FiltresOù l’utiliser
Filtrer une courte liste pendant la saisie est l'une des petites interactions les plus utiles, et surligner la correspondance explique pourquoi chaque élément reste. Ce champ filtre une liste de villes à chaque frappe, ignore les accents pour que malaga trouve Málaga, entoure la partie trouvée d'un surlignage coloré et affiche un message quand rien ne correspond.
Le script tient en une douzaine de lignes et construit le surlignage avec des nœuds DOM, jamais innerHTML, la saisie reste donc sûre. Remplace la liste par des produits ou des personnes.