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!

O'Reilly Velocity Conference
Save 20% with discount code AFF20

Recent Features

  • 6 Things You Didn&#8217;t Know About Firefox OS

    Firefox OS is all over the tech news and for good reason:  Mozilla's finally given web developers the platform that they need to create apps the way they've been creating them for years -- with CSS, HTML, and JavaScript.  Firefox OS has been rapidly improving,...

  • 9 Mind-Blowing Canvas Demos

    The <canvas> element has been a revelation for the visual experts among our ranks.  Canvas provides the means for incredible and efficient animations with the added bonus of no Flash; these developers can flash their awesome JavaScript skills instead.  Here are nine unbelievable canvas demos that...

Incredible Demos

  • iPhone Checkboxes Using MooTools

    One of the sweet user interface enhancements provided by Apple's iPhone is their checkbox-slider functionality. Thomas Reynolds recently released a jQuery plugin that allows you to make your checkboxes look like iPhone sliders. Here's how to implement that functionality using the beloved...

  • Introducing MooTools NextPrev

    One thing I love doing is duplicating OS functionalities. One of the things your OS allows you to do easily is move from one item to another. Most of the time you're simply trying to get to the next or the previous item....

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

  • Open Files from Command Line on OS X

    I'm as much of a fan of application UIs as anyone else but I'm finding myself working more and more from the command line lately.  Much of that is becoming obsessed with media manipulation but I'm forcing myself to use less UIs so that I...

  • Get Stock Quotes From Command Line

    When I conned my way into my first professional programming gig, I didn't really think much about money -- just that I was getting my foot in the door.  But as my career has gone on, I've been more aware of money, investing, and retirement.  I've recently...

  • Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • Create an Image Preview from a Video

    Visuals are everything when it comes to media.  When I'm trying to decide whether to watch a video on Netflix, it would be awesome to see a trailer of some kind, but alas that isn't available.  When I'm looking to download a video on my computer,...

  • New:  Webdesigner News!

    A new and exciting website has recently been launched for web designers and developers. You likely spend hours every morning browsing through hundreds of posts on your RSS feeds, hoping to stumble across relevant stories. Webdesigner News was built to provide web designers and developers with...