Dropdown mit Suchfeld
Tippen grenzt die Liste ein, passende Buchstaben werden in jeder Option hervorgehoben.
Einstellungen
Code
<div class="uv-fds"><button class="tg">Stadt wählen <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="Suchen ..."></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 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
Wofür du ihn nutzen kannst
Passt gut zu einem Immobilienportal, auf dem man erst die Stadt wählt und dann Wohnungen und Häuser ansieht. Ab einem Dutzend Städte wird Scrollen lästig, drei Buchstaben tippen geht schneller, und die Markierung zeigt, warum ein Treffer passt. Auch für die Gebietsauswahl einer Lieferdienst-App geeignet. Oft gesucht als Dropdown mit Suche oder Combobox.
Das Suchfeld bekommt den Fokus, sobald sich das Menü öffnet, man kann also direkt lostippen. Setz die meistgesuchten Städte nach oben. Und prüf, ob der Text mit der Markierungsfarbe dahinter gut lesbar bleibt.