- Madrid
- Málaga
- Barcelona
- Bilbao
- Valencia
- Sevilla
- Salamanca
- Santander
- Granada
- Gijón
Sin resultados
Live-Suche mit Hervorhebung
Tippe, und die Liste filtert sofort, die passenden Buchstaben werden in jedem Treffer hervorgehoben.
Einstellungen
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="Stadt suchen" aria-label="Stadt suchen" 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">Keine Ergebnisse</p></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Filter
Alle ansehen: FilterWofür du ihn nutzen kannst
Eine kurze Liste beim Tippen zu filtern ist eine der nützlichsten kleinen Interaktionen, und die Hervorhebung zeigt, warum ein Eintrag bleibt. Dieses Suchfeld filtert eine Städteliste bei jedem Tastendruck, ignoriert Akzente, sodass malaga auch Málaga findet, markiert den passenden Teil farbig und zeigt eine Meldung, wenn nichts passt.
Das Skript hat ein Dutzend Zeilen und baut die Markierung mit DOM-Knoten statt innerHTML, Eingaben sind also sicher. Ersetze die Liste durch Produkte, Tags oder Personen.