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 options 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 options. 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 options 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.

Frequently Asked Questions (FAQs) on Creating Autocomplete Datalist Controls