- Madrid
- Málaga
- Barcelona
- Bilbao
- Valencia
- Sevilla
- Salamanca
- Santander
- Granada
- Gijón
Sin resultados
Live search with highlighted matches
Type and the list filters instantly, with the matching letters highlighted in each result.
Settings
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="Search city" aria-label="Search city" 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">No results</p></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
See all FiltersWhere to use it
Filtering a short list as people type is one of the most useful small interactions, and highlighting the match shows why each item stayed. This search field filters a list of cities on every keystroke, ignores accents so malaga finds Málaga, wraps the matching part in a colored mark and shows an empty message when nothing fits.
The script is a dozen lines and builds the highlight with DOM nodes, never innerHTML, so user input is safe. Replace the list with products, tags or people and keep the same structure.