Datalist for Autocomplete
Suggest input values with the datalist element.
What Is datalist?
The <datalist> element provides a list of predefined suggestions for an <input>:
<label for="browser">Favorite browser</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
<!-- list attribute links input to datalist by id -->
<!-- User can type freely OR select a suggestion -->datalist vs select
Key difference between <datalist> and <select>:
- datalist — free text + suggestions (user can type anything)
- select — constrained choice (user must pick from list)
Use datalist when you want to suggest values but not restrict input.
All lessons in this course
- Select and option Dropdown Menus
- Textarea for Multi-line Input
- Checkbox and Radio Button Groups
- Datalist for Autocomplete