Meet the datalist element

UPDATE: Browsers vary a bit in how they render datalists based on the type of form input. Eiji Kitamura has a demo that illustrates how they all work.

One of my favorite parts of HTML5 forms is the datalist element. Opera added support in version 9.0. Support in Firefox and Internet Explorer followed. Today, datalist finally landed in a Chrome beta release.

Simply put, datalist is a way of providingto provide pre-defined choices for an input field. Each choice is an option element, and a child of the datalist object. You’re probably familiar with the option element from years of building menus with select.

Associating a datalist object with a form field is simple. Add a list attribute to input element. Set the value of the list attribute to the value of the id attribute of the datalist element. You can see an example below (click the HTML tab).

Now: just because it’s available, doesn’t mean it works well in all browsers. It’s supported, yes. But the user interface and interaction isn’t consistent. Opera and Internet Explorer 10¹ display the list of options when the input field receives focus as shown in Figure 1.

Meanwhile, Chrome currently displays the list of options only after the value of the associated input field changes, as shown in Figure 2. In all three aforementioned browsers, the options displayed will be filtered as user input changes.

Firefox, on the other hand, is a special case. In my opinion, displays the worst behavior of all major browsers. Like Chrome, Firefox displays the list of options only after the value of the associated input changes. But its list filtering is … janky. Firefox will filter the list of options and match letters, regardless of case and their position in the string. Both “Accra, Ghana” and “Paris, France” are among the filtered datalist items displayed (Figure 3). Subsequent input will re-filter the list.

I should note here that Firefox 16 for Android works much like Opera and IE10 on desktop. Datalist options appear on focus.

What about Safari? Sorry kids. As of version 6.0.2, it’s not supported.

¹ Internet Explorer 10 for desktop supports this IE10 for mobile does not.