Searchable dropdown
Type to narrow the list, and the matching letters light up in each option.
Settings
Code
<div class="uv-fds"><button class="tg">Choose city <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="Search..."></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 for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Filters
Where to use it
A good fit for a property portal where people choose a city before browsing flats and houses. With a dozen cities or more, scrolling gets tedious; typing three letters is quicker, and the highlight shows why each result matched. It also suits a delivery app choosing a zone. Often searched as a dropdown with search or a combobox.
The search field gets focus as soon as the menu opens, so people can type straight away. Put the most requested cities at the top of the list. And make sure the text still reads well with the highlight colour behind it.