The secret element is the
datalist element. If we attach a
datalist to an already existing
input element we get a native dropdown with autocomplete! Booom, and it just works 🚀
Plus it is supported by all modern browsers.
<input list="europe-countries" placeholder="Start typing..."> <datalist id="europe-countries"> <option>Russia</option> <option>Germany</option> <option>United Kingdom</option> ... </datalist>
The input starts behaving like a select and when we start typing it searches inside the options of the datalist.
Let's see it in action!