What's New in HTML5 Forms: The Datalist Control

By Robert Gravelle

As mentioned in my article entitled What's New in HTML5 Forms: New Email, URL, and Telephone Input Types, the HTML5 spec introduces a number of updated form elements that promise to make web developers' lives easier. Although browser support is still far from universal, there is little downside to using the new form controls--at least as far as input elements go.

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>

If a visitor is using a browser which does not support the Datalist, which would currently be anything other than Firefox (4+) or Opera (11+), they would not be able to see the Datalist in action. What's more, if they were using Safari, they likely wouldn't be able to read anything below the Datalist! Here's a screenshot of the above Datalist in action in Firefox 9:

Image 1

According to the quirksmode.org site, the curious Safari behavior is caused by the tags. That being the case, removing them remedies the problem, but there goes the Datalist! Luckily there are some workarounds; including a <select> tag around the options within the <datalist> or adding closing </option> tags will do the trick.

Solution 1: <select> tag around the options within the <datalist>:

<input type="text" id="favGtrPlayer" list="GtrPlayers">
<datalist id="GtrPlayers">
  <select>
    <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">
  </select>
</datalist>

Solution 2: closing </option> tags:

<input type="text" id="favGtrPlayer" list="GtrPlayers">
<datalist id="GtrPlayers">
  <option value="Jimi Hendrix">Jimi Hendrix</option>
  <option value="James Hetfield">James Hetfield</option>
  <option value="Eric Clapton">Eric Clapton</option>
  <option value="Eddie Van Halen">Eddie Van Halen</option>
  <option value="Rob Gravelle">Rob Gravelle</option>
  <option value="Jeff Waters">Jeff Waters</option>
  <option value="John Petrucci">John Petrucci</option>
  <option value="Steve Vai">Steve Vai</option>
  <option value="The Edge">The Edge</option>
  <option value="Joe Satriani">Joe Satriani</option>
  <option value="Yngwie Malmsteen">Yngwie Malmsteen</option>
  <option value="Ian Chrichton">Ian Chrichton</option>
</datalist>

Maintaining Backwards Compatibility

In browsers that do not support the Datalist, only the textbox should appear. This fallback may not be suitable for your needs because it requires the user to intuitively "know" the choices. It would seem more appropriate to present the datalist as a listbox. The way to do that is to include both the <select> and </option> tags so that a fully functional SELECT element exists within the Datalist:

Going the Extra Mile

Of course, autocomplete controls are nothing new. It's just that they took some work to implement before HTML5. Several JS frameworks such as Dojo and jQuery offer excellent autocomplete controls, as long as you don't mind downloading a little extra code.

The "best of both worlds" solution would be to test for Datalist support and only load the extra code as the fallback position. The Modernizr library has a test for the Datalist, or you could code it yourself if you don't need to perform other tests. The following check is based on the assumption that the Datalist control will only have options if supported:

<script type="text/javascript"><!--mce:0--></script>

Here's a web page that contains several good fallback auto-suggest widgets.

Conclusion

So far, the Datalist hasn't ranked high on the list of HTML5 elements being implemented by browser vendors, with only Firefox (4+) and Opera (11+) supporting it for the time being. None the less, I have no doubt that the other browser vendors will soon follow suit.



Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date