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
One of my favorite parts of HTML5 forms is the
Opera added support in version
9.0. Support in Firefox and
Internet Explorer followed. Today,
datalist finally landed in a
datalist is a way ~~of
pre-defined choices for an
input field. Each choice is an
element, and a child of the
datalist object. You're probably familiar
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
attribute to the value of the
id attribute of the
You can see an example below.
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
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.
datalist still isn't supported in Safari ≤ 9.