I recently had to add a dropdown box to a textbox at work, instead of jumping on the first jQuery plugin I could find, I instead started checking if this feature was finally added to “native html”, and it was, and it is called a datalist.

Simple Example

A datalist in HTML5 is a simple way giving a (textbox) input field a dropdown of choices to select from, you bind a datalist and an input field via using the list="magic-ponies" attribute on the input field like so:

<input list="hosting-plan" type="text"> <datalist id="hosting-plan"> <option value="small"/> <option value="medium"/> <option value="large"/> </datalist> 1 2 3 4 5 6 7 8 9 <input list = "hosting-plan" type = "text" > <datalist id = "hosting-plan" > <option value = "small" /> <option value = "medium" /> <option value = "large" /> </datalist>

which will give you this:

Simple example with additional text

As you can see the way you specify values inside of the datalist is very similar to how you would populate a <select> box, using the <option value="blah"> , except that you can choose to only have a single self-closing option tag instead of the usual option-pair like <option value="blah">foo</option> .

The neat thing about the datalist tag is that if you do choose to give it a text inside of the option tag like with a select box, like this:

<input list="hosting-plan" type="text"> <datalist id="hosting-plan"> <option value="small">$15 USD</option> <option value="medium">$20 USD</option> <option value="large">$25 USD</option> </datalist> 1 2 3 4 5 6 7 8 9 <input list = "hosting-plan" type = "text" > <datalist id = "hosting-plan" > <option value = "small" > $15 USD </option> <option value = "medium" > $20 USD </option> <option value = "large" > $25 USD </option> </datalist>

Your textbox will look like this, notice that the price is right-aligned, very fancy.

Dynamically add list items

So all you need to dynamically add items into the datalist is to append an <option> element within the <datalist> with some simple JavaScript.

<input list="hosting-plan" type="text" /><datalist id="hosting-plan"> <option value="small">$10 USD</option> <option value="medium">$20 USD</option> <option value="large">$25 USD</option> </datalist> <script> // Create a new option element. var optionNode = document.createElement("option"); // Set the value optionNode.value = "huge"; // create a text node and append it to the option element optionNode.appendChild(document.createTextNode("$50 USD")); // Add the optionNode to the datalist document.getElementById("hosting-plan").appendChild(optionNode); </script> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <input list = "hosting-plan" type = "text" /> <datalist id = "hosting-plan" > <option value = "small" > $10 USD </option> <option value = "medium" > $20 USD </option> <option value = "large" > $25 USD </option> </datalist> <script> // Create a new option element. var optionNode = document . createElement ( "option" ) ; // Set the value optionNode . value = "huge" ; // create a text node and append it to the option element optionNode . appendChild ( document . createTextNode ( "$50 USD" ) ) ; // Add the optionNode to the datalist document . getElementById ( "hosting-plan" ) . appendChild ( optionNode ) ; </script>

Populating list dynamically from external resource

Here is an example for dynamically adding data into a datalist from an online resource, in this case the public reddit JSON “file” containing a list of subreddits (http://www.reddit.com/subreddits.json), I am going to display the name of the subreddit and the amount of subscribers of that subreddit in the datalist.

<html> <head> <title>Subreddit Picker</title> </head> <body> <h1>Select your favorite Subreddit</h1> <input type="text" list="hosting-plan" /> <datalist id="hosting-plan"></datalist> <script> // Wait for the dom to be loaded document.addEventListener('DOMContentLoaded', function(event) { // Setup an XMLHttpRequest / AJAX request var request = new XMLHttpRequest(); request.open('GET', 'http://www.reddit.com/subreddits.json'); // Setup an "event listener". request.onload = function() { if (request.status >= 200 && request.status < 400){ var response = JSON.parse(request.responseText.toString()); response.data.children.forEach(function(el){ addListEntry(el.data.display_name, "Subs: " + el.data.subscribers); }); } }; // Send our request request.send(); }); // Break the list adding code into a function for easier re-use function addListEntry(value, text) { // Create a new option element. var optionNode = document.createElement("option"); // Set the value optionNode.value = value; // create a text node and append it to the option element optionNode.appendChild(document.createTextNode(text)); // Add the optionNode to the datalist document.getElementById("hosting-plan").appendChild(optionNode); } </script> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 <html> <head> <title> Subreddit Picker </title> </head> <body> <h1> Select your favorite Subreddit </h1> <input type = "text" list = "hosting-plan" /> <datalist id = "hosting-plan" > </datalist> <script> // Wait for the dom to be loaded document . addEventListener ( 'DOMContentLoaded' , function ( event ) { // Setup an XMLHttpRequest / AJAX request var request = new XMLHttpRequest ( ) ; request . open ( 'GET' , 'http://www.reddit.com/subreddits.json' ) ; // Setup an "event listener". request . onload = function ( ) { if ( request . status >= 200 && request . status < 400 ) { var response = JSON . parse ( request . responseText . toString ( ) ) ; response . data . children . forEach ( function ( el ) { addListEntry ( el . data . display_name , "Subs: " + el . data . subscribers ) ; } ) ; } } ; // Send our request request . send ( ) ; } ) ; // Break the list adding code into a function for easier re-use function addListEntry ( value , text ) { // Create a new option element. var optionNode = document . createElement ( "option" ) ; // Set the value optionNode . value = value ; // create a text node and append it to the option element optionNode . appendChild ( document . createTextNode ( text ) ) ; // Add the optionNode to the datalist document . getElementById ( "hosting-plan" ) . appendChild ( optionNode ) ; } </script> </body> </html>

You can checkout the example site here.

Browser Support

As web developers we often have to maintain support for older browsers and systems, I fortunately only have to officially support Chrome and the Default Android and iOS browsers at my workplace, but for the completeness, here are a breakdown of the browser support for the datalist element.

Internet Explorer Partially supported by IE from version 10 Not supported before version 9

FireFox Supported from version 4

Chrome Supported from version 20



More detailed information can be found on Can I Use.

I hope you learned something new from this post, now go forth and build awesome HTML5 thingies.

Note: To better support older browsers and Safari, you can include this polyfill.

Update 25.11.2015

Webucator was so kind as to use this blog post as an inspiration for one of their videos, you can watch the video below.

Webucator is a company that provides various training courses related to web development and various other tech fields, feel free to check out their HTML Training as well as their other courses.