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