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.
datalist is a way
of providing 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
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 101 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.
What about Safari? Sorry kids. As of version 6.0.2, it’s not supported.