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:

which will give you this:

dropdown

 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:

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

datalist2

 

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.

 

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.

 

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.

9 comments

  1. Is there a way that I can hide the value from displaying and show only the text within the child element?

    I’ve tried omitting the appending of the child element and just setting the innerText but then the option dropdowns don’t render.

    Thanks

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

Leave a Reply

Your email address will not be published. Required fields are marked *