HTML Datalist Control
The topic of today’s article, the Datalist control, is a little more complex than a simple input, and thus requires more care if you decide to use it. So for those of you who can’t wait to take advantage of the latest and greatest that HTML5 has to offer, this article is for you!
The Datalist element is used to suggest input values to the user, thereby providing an “autocomplete” feature on form elements. This is especially useful for long lists, such as countries or clothing manufacturers. Rather than scan through the entire list, the input control can suggest some items as soon as the user has typed in some characters. Thus, it behaves as a sort of combobox, possessing both a textbox and list component. Here is how it would appear:
WARNING: due to a bug in Safari, it may hide everything after the Datalist!
<p>
<label>
Enter your favorite guitar player:<br />
<input type=”text” id=”favGtrPlayer” list=”GtrPlayers”>
<datalist id=”GtrPlayers”>
<option value=”Jimi Hendrix”>
<option value=”James Hetfield”>
<option value=”Eric Clapton”>
<option value=”Eddie Van Halen”>
<option value=”Rob Gravelle”>
<option value=”Jeff Waters”>
<option value=”John Petrucci”>
<option value=”Steve Vai”>
<option value=”The Edge”>
<option value=”Joe Satriani”>
<option value=”Yngwie Malmsteen”>
<option value=”Ian Chrichton”>
</datalist>
</label><br />
</p>
Works in Firefox (4+) and Opera (11+).
