Autocomplete
Create a label and input like you normally would. Then create a datalist
element, and add an option
element for each autocomplete choice.
Give the datalist
an ID. Add the list
property to your input with a value equal to your datalist
ID.
<label for="states">Who's the best wizard?</label>
<input type="text" id="wizards" name="wizards" list="wizards-list">
<datalist id="wizards-list">
<option>Harry Potter</option>
<option>Hermione</option>
<option>Dumbledore</option>
<option>Merlin</option>
<option>Gandalf</option>
</datalist>
⏰ Preorder my new course on Web Components! Want to learn how to build Web Components from scratch, master best practices, and more? Preorder today and get $100 off of the launch price.
Find this useful? You can support my work by purchasing an annual membership.