O'Reilly

HTML5 Datalist

By on  

One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used functionality has been moved from a JavaScript-only utility to HTML via the new DATALIST element.

The HTML

A DATALIST element gets an ID attribute and contains numerous OPTION elements, just as a SELECT element would:

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Once the DATALIST element is in place, a list attribute gets added to an INPUT element which refers to the list ID:

<input name="frameworks" list="frameworks" />

What's provided is a very rudimentary but useful autocomplete list of existing items that match given text.  Of course the lack of styling that comes with OPTION elements isn't optimal, and there's no method to hook DATALIST's up to a service endpoint for more dynamic suggestions, but this new element is a step in the right direction!

Track.js Error Reporting

Recent Features

  • Facebook Open Graph META Tags

    It's no secret that Facebook has become a major traffic driver for all types of websites.  Nowadays even large corporations steer consumers toward their Facebook pages instead of the corporate websites directly.  And of course there are Facebook "Like" and "Recommend" widgets on every website.  One...

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

Incredible Demos

  • Duplicate the jQuery Homepage Tooltips Using Dojo

    The jQuery homepage has a pretty suave tooltip-like effect as seen below: Here's how to accomplish this same effect using Dojo. The XHTML The above HTML was taken directly from the jQuery homepage -- no changes. The CSS The above CSS has been slightly modified to match the CSS rules already...

  • Custom Scrollbars in WebKit

    Before each of the browser vendors we like was providing unique CSS controls, Internet Explorer was setting the tone.  One such example is IE's early implementation of CSS filters. Internet Explorer was also the first browser that allowed developers to, for better or worse, customize...

Discussion

  1. Andrew

    Alas, non-functional on Android JB default browser.

    • That’s a renderer issue, not a standards issue.

  2. Is there anyway, I can query my database for results.

    • Nope, you’ll need to output the list upon page load. You could, I suppose, do an ajax query and inject/remove elements from the list.

  3. Doesn’t work in Safari 6.0.2 ? Works in Chrome and FF.

  4. “Renderer issue” with Safari on iOS 6.0.1 / iPod Touch as well. :-(

  5. Sorry, genius here typed select in angle brackets…message should have read:

    I love datalists but really wish the option sub-elements worked like they do in a i.e. had the ability to display a label whilst having a different (hidden to the end user) value. That’d be so nice, then you could replace big horrible s with datalists.

    I know there are some tasty libs like http://harvesthq.github.com/chosen/ but native options are always handy to have available.

    Cheers

    p.s. I realise setting value and label on datalist option elements sort of works but you get the value displayed on the popup which is messy in most cases.

  6. I like the new datalist concept but I’m struggling to understand the best way to use it. My difficulty is that if you know all the acceptable inputs why not use another html form element like: a drop down box if space is tight or check/radio boxes?

    I particularly like drop down boxes because the user doesn’t have to worry about typing the correct input (typos) and you help the user by reducing the amount of keystrokes they need to use to complete your form.

    But there must be a good application and I’ve love to hear some ideas…

  7. Alex

    I guess datalist should be styled invisible for old browsers?

  8. This… this is phenomenal. Thank you for sharing!

    This will cut my development time drastically because I use autocomplete on many different pages of an internal web application and I decide what browsers the sales people (85% of the company) use.

    I’ll for sure install Chrome for them and save the company time and money by using this HTML5 feature.

    Nice find!

  9. wil black

    Doesn’t seem to work on Chrome for Android. It’s a step in the right direction but needs ajax support to be really useful.

  10. Simon

    I have the same issue with this as Virendra and Dennis. If the data volume is small enough to be rendered as a datalist, I don’t see any point in using an autocomplete over a standard select box. The main use-case for autocomplete is for searching in large-volume datasets, where a regular select box becomes unusable.

  11. Beben Koben

    Good work in Mozilla v.17 :)

  12. If I am not mistaken, the advantage this has over a select box is that the select box restricts the user to the finite list of options available, whilst an input with a datalist suggest values, but allows the user to input a value not in that list.

    So maybe more “auto-suggest” than “auto-complete” :-)

  13. I cannot see why would this be desired addition to HTML. There are too many things that you’d want to customise to make it useful, e.g. debouncing, ability to query data endpoint, ability to do partial search are just a few of top of my head. The task is hardly trivial to accomplish using JavaScript.

    It is my opinion, that the same way that placeholder introduction encouraged bad UX practises and cross-browser incompatible UIs, the datalists will become another thing on the “progressive enhancement” list.

  14. Jos Gerrits

    I don’t see why you would add some AJAX to the standards. It’s just as easy to listen for a type event on the input and occupy the datalist with new options.

    Nice solution! :)

  15. Hi, I am a web developer working for IBM’s Eclipse Orion(http://www.eclipse.org/orion/) team. We used to use HTML5 data list but as it is not supported in Safari and IE(9 at the moment), we implemented our own. The data binding is customize-able and the suggestion list is fully style-able. You can also put categories there. I have a blog post describing how to use it and there is js-fiddle demo link where you can try to change the data provider and the style. Give it a try and feed back please.

  16. Nice :) The complaints about browsers / engines not supporting it is moot. You could always progressively enhance with javascript and that’s (imo) the way to go anyway. Better take the standards as a starting point than stay behind forever. Keep ‘m up!

  17. The future is bright!

  18. I have to agree with the comments above regarding using this with AJAX. It’s simple enough to do a call with javascript/jQuery and populate the list based on that.

    Adding AJAX calling to the standard is removing the separation between your front end and back end code, which I don’t think would be a good direction to head in.

  19. how cani retrive databse tables values in datalist tag.
    plz any one give me source code for tht..

  20. west

    @dennis
    It is useful for changing fields like “town” but rarely do you know all towns that will be put… but those that already exist you want the user to see as soon as typing begins.

  21. I’m wondering if it is possible to show datalist suggestions only by clicking on the input field?

    • Double click the Input box. It will roll down the list with the data.

  22. vincent

    Hi. Is it possible to limit the input to what’s in the datalist only ?

  23. Me!

    imagine if we have 100,000 records!
    does it a good idea?

    how about 1,000,000 records?
    could be work speedy?
    i think so it will be heavy for large records!
    hum?!

    • Adding hundred thousand records in the list is not a good idea. It might slow down the process. However, you can filter the records by dynamically adding data to the Datalist. See the example here. http://bit.ly/1AXqI1q
      Its only problem is Styling and matching a character randomly in the list of values.

  24. Foobar

    Nothing stops you from combining the datalist with Ajax. Let the user start typing, and fill in the datalist dynamically.

    E.g. if you have a name input formular, initially fill the datalist with the most common forenames. Either autocompletion kicks in (which, in the case of mobile devices e.g. might even be integrated into the virtual keyboard application!!) or the user tries to type something the initial data list didn’t include.

    While the user types, replace the content of the datalist with more appropriate suggestions.

    The big benefit over all these proprietary solutions is a much better integration with the native look&feel of the users environment, e.g. none of these is capable of providing data to the mentioned virtual keyboards.

    As with many other HTML5 tags, datalists are not intended as a replacement for JS enhanced gimmicks, but rather as a semantic bridge between application logic and the native UI of the users environment.

  25. don’t see any point in using an autocomplete over a standard select box. I’ll for sure install Chrome for them and save the company time and money by using this HTML5 feature.

  26. How can i change background-color after selection? Emergency, please!

  27. Hi! I have tried to make a search hint table using datalist, but I have any idea to show or open datalist recomendations/hints after adding this to the datalist.
    There are any class o pseudo class for the datalist to show it

    Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...