The HTML5 datalist element can be used to define suggestions and bind them to a input field for the user to choose from. While this sounds super useful not every browser supports this element yet. In this post I would like to show how you can get the datalist element working in most browsers.

We will start with a simple example that works out of the box with IE 10, 11, Edge, Firefox, Chrome (including Chrome for Android) and Opera.

<input type="text" value="" list="colors"/>
<datalist id="colors">
   <option value="Black"></option>
   <option value="Red"></option>
   <option value="Green"></option>
</datalist>

The result in modern browsers looks something like this:

This is already quite useful but if we add a small JavaScript polyfill we can get support for older browsers and Apples Safari.

A simple polyfill can be found on Github.  Just follow the well defined steps and have a cross browser datalist in no time.

Photo by Alexander Mueller