To create a native autocomplete search in HTML, you can use the datalist
tag with a set of options
attached to an input
element. For example:
<label for="tech">Choose your tech:</label>
<input list="techlist" name="tech" id="tech" />
<datalist id="techlist">
<option value="HTML">
<option value="CSS">
<option value="JS">
</datalist>
Copied to clipboard!
Note that the id
of the datalist
must match the list
attribute on an input
element.
You can try the behavior with the input below:
Currently, it has partial support on the latest versions of IE and Firefox, while other latest versions of major browsers are well supported.


Resources:
Remove adsπ Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. β
Get access