Advertisement

Introducing the HTML5 “datalist” Element

by
Student iconAre you a student? Get a yearly Tuts+ subscription for $45 →
This post is part of a series called Strange and Unusual HTML Tags.
How to Create Your Own HTML Elements With Web Components
Build a Custom HTML5 Video Player

HTML5 introduced a number of new elements, amongst which some interesting form controls. One such useful, yet little known control is the datalist element. Let's see what it can do for us.

Imagine we have a form and we want a user to input a string of text, like their name for example. We have the <input type="text" /> element, which will allow the user to type whatever he or she pleases. Imagine then that we want the user to enter his or her country of residence; we'd likely use a <select> element. This would limit the results to the options available (sometimes a good thing) and would also present the user with a potentially huge list to choose from.

But what if we want the user to be free to enter what they please whilst at the same being given some suggestions? This is where datalist comes in.


How do I Use it?

The datalist contains option elements much like the select element, though datalist itself is not an independent control. Instead it is added or attached to an <input type="text" /> element using the list attribute. Consider the following markup:

	<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" />
		<option value="Coda" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

We have a regular <input type="text" /> control with an id and the new list attribute. This tells the browser to load the list of values or suggestions from the datalist element with a corresponding id.

Then comes the actual datalist element with the aforementioned id and a collection of option elements. This is how the values are attached to the input control.

When we run this in the browser, we will see a normal textbox, then when we starting typing (or press the down arrow key, which works in Firefox and Chrome but not in Opera) the complete or filtered list appears. As we type, only the relevant options will be shown, much like how Google's Search box displays suggestions. Be aware though, slight behavioral variations do exist from browser to browser.

According to the official W3C website, the datalist can be used with:

  • <input type="text" />
  • <input type="url" />
  • <input type="tel" />
  • <input type="color" />
  • Data & Time (including Month etc.), Range and more.

More Attributes

We can take the options one step further by addind a label attribute, as in some of the items below:

	<label>Select your preferred code editor:</label>
	<input type="text" id="txt_ide" list="ide" />
	<datalist id="ide">
		<option value="Brackets" label="by Adobe" />
		<option value="Coda" label="by Panic" />
		<option value="Dreamweaver" />
		<option value="Espresso" />
		<option value="jEdit" />
		<option value="Komodo Edit" />
		<option value="Notepad++" />
		<option value="Sublime Text 2" label="the developer's choice" />
		<option value="Taco HTML Edit" />
		<option value="Textmate" />
		<option value="Text Pad" />
		<option value="TextWrangler" />
		<option value="Visual Studio" />
		<option value="VIM" />
		<option value="XCode" />
	</datalist>

Precisely how these labels are displayed and handled depends on the browser - take a look at the quirks section lower down to see how.


Can it be Used Right Now?

The browser support for datalist remained narrow until recently. Now IE 10+, Firefox 4+, Chrome and Opera support it (no Safari as yet). It is also supported by Opera Mobile and Firefox for Android. Take a look at this screenshot showing the current status as listed by caniuse.com:

Older browsers will automatically ignore the datalist element.

The overall support mentioned is 48.36% percentage. Arguably not that good, but the positive news is that older browsers will automatically ignore the datalist element, giving us a gracefully degrading experience. This is in fact true for all the new HTML5 form elements. If support for older browsers is required, the jQuery Autocomplete can be used as a fallback.


Quirks

Since wider browser support is only recent, there are predictable interpretations by the vendors. Firefox and Chrome use the OS theme for styling of the list options, whilst Opera will inherit certain styles (color, font-family) from the input field. Other than that, forget styling the datalist element with CSS.

Behavior also varies as to how the values are filtered. Each browser handles the list differently when the label and value attributes of the option element are used.

For example, Opera will filter on the basis of both value and label. "by A" and "Brac" will both return "Brackets" in our case.

Chrome, however, will ignore the label. "by A" won't return any results, for example, whereas "Brac" will.

Firefox displays only the label if it's defined. "by A" will return "by Adobe", but "Brackets" no longer exists at all!


Conclusion

There's plenty of room for improvement where implementation is concerned, but overall this is a welcome addition to the world of web. I hope this has whetted your appetite!


Further Resources

Advertisement