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:
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