HTML5
Datalist
Introduction
Datalists provide an easy way to provide autocomplete functionality within HTML5 (without Javascript).
The autocomplete functionality provided by <datalist> is from a specified list and differs from browser autocomplete which pulls from a user's previous input.
Browser autocomplete is turned on with the attribute: <input type="text" id="firstname" autocomplete="on">
Example 1
A form field to enter favorite color
<form>
<label for="fav_color">Favorite Color:</label>
<input type="text" id="fav_color">
</form>
Example 1 (continued)
<form>
<label for="fav_color">Favorite Color:</label>
<input type="text" id="fav_color" list="color_list">
</form>
<datalist id="color_list">
<option>Almond</option>
<option>Antique Brass</option>
<option>Apricot</option>
...
</datalist>
Example 1 (working)
Example 2
Selecting the hex value associated with the color name
<form>
<label for="fav_color">Favorite Color:</label>
<input type="text" id="fav_color" list="color_list2">
</form>
<datalist id="color_list2">
<option value="#EFDECD">Almond</option>
<option value="#CD9575">Antique Brass</option>
...
</datalist>
Example 2 (working)
Implementation
- Implementation is not universal - or uniform!
- Firefox works with or without the value attribute, Chrome only works without it!
-
IE 10 & 11 if used with the value attribute actually matches the attribute itself not the string showing.
- Firefox matches any part of the string, IE & Chrome only match from the beginning.
- IE 10 & 11 show the list as soon as you click into the field (FF & Chrome only once you start typing)
-
Check here: http://caniuse.com/#feat=datalist
HTML5 Datalist
By Amanda Giles
HTML5 Datalist
- 3,077