Creating Autocomplete datalist Controls
If you have seen a decent number of websites in your life, you have surely noted a set of recurring widgets in most of them. Among these widgets are the search box, the newsletter widget, and the text box autocomplete widget. The latter is a widely used component, especially when the website needs a field that has several possible values but also needs to allow to create a completely new value. This component is so adopted that many JavaScript frameworks have their own autocomplete widget.
Until few years ago, there wasn’t a native HTML element to deal with this situation and developers have implemented the concept in different ways. This piece of the HTML puzzle isn’t lacking anymore. Today, we have an HTML element called datalist
that serves this purpose. In this article, we’ll discover what it is and how to use it.
What’s the datalist
Element?
The datalist
element represents a set of option elements that embody predefined options for other controls.
So, this element can be seen as a wrapper for a set of option
s that express the possible values an input
can assume, without restricting it to those values only. By default datalist
and its children are hidden, so you won’t see them in a web page. In fact, datalist
must be linked to another element through the use of a list
attribute set on these other elements. The value of this attribute must be set to the ID of the datalist
to use.
A simple example of HTML code that uses this element is shown below:
<input name="city" list="cities" />
<datalist id="cities">
<option value="Naples" />
<option value="London" />
<option value="Berlin" />
<option value="New York" />
<option value="Frattamaggiore" />
</datalist>
The code above defines an input
and a datalist
element that contains several option
s. As you can see, the datalist
has “cities” as its ID and the input
is linked to it by using the list
attribute (that has “cities” as its values as well).
A live demo of the code is shown below and available as a JSFiddle.
Due to its nature, this element lends itself well to be used in conjunction with JavaScript. For instance, you can perform Ajax requests to a server to retrieve relevant values based on the inputs of the user.
An example is shown in the demo below, available as a JSFiddle, where the option
s of datalist
are dynamically generated.
So far, we’ve discussed how we can autocomplete textual fields, but this isn’t the only situation where we can employ this HTML element.
datalist
and <input type="color">
The previous example is nice, but you can do even more with datalist
. What if you want to suggest a color to your users through the use of <input type="color">
? In this case, you can write the following code:
<input type="color" list="colors" />
<datalist id="colors">
<option value="#00000"/>
<option value="#478912"/>
<option value="#FFFFFF" />
<option value="#33FF99" />
<option value="#5AC6D9" />
<option value="#573905" />
</datalist>
This demo is currently well supported by Chrome 37 and Opera 24 only. Internet Explorer 11 shows the field as a text field, while Firefox 32 doesn’t show the suggested colors.
A live demo of the code is shown below and available as a JSFiddle.
datalist
and <input type="range">
Another example of use is in conjunction with a <input type="range">
element:
<input type="range" value="0" min="0" max="100" list="numbers" />
<datalist id="numbers">
<option value="20" />
<option value="40" />
<option value="60" />
<option value="80" />
</datalist>
In this case on browsers that support this demo (Internet Explorer, Opera, and Chrome) the range bar will have four equispaced vertical signs, one for each of the values defined in the datalist
.
A live demo of the code is shown below and available as a JSFiddle.
Browser Support
CanIUse shows how datalist
has very good support among desktop browsers. In fact, it’s supported by older versions of Firefox, Chrome, and Opera, and by Internet Explorer 10+. This means that you can reliably use it in your projects. Safari doesn’t support it, so Mac users are a bit unlucky.
There are few mobile browsers that have implemented the element. The only browsers that support it are Firefox and Chrome for mobile, and the last version of the Blackberry browser.
Polyfills
In case you want to provide support for this element in browsers that don’t understand it, you can use either Relevant Dropdowns or jQuery HTML5 datalist plugin. Keep in mind that these polyfills work only as a replacement in the cases that use a text field, meaning that you can’t polyfill ranges or colors.
Conclusion
In this article I introduced you to the datalist
element and how it can be employed to create native autocomplete widgets. As you’ve seen in the examples shown, it can be used also with non-textual fields like colors and ranges. Finally, the support among browsers is good enough to adopt this element in production.
Did you know about this element? Have you ever used it? Let’s start a discussion.