How to add dropdowns to textboxes in HTML5

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:

XHTML

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:

XHTML

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.

XHTML

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.

varoptionNode=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.

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.

fantastic! thank you. i was about to stick something much more complex together. haven’t even heard of the functionality before.
i use it to lookup cities from a zip-code field and dynamically build the datalist in the city field. works a treat.