Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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.

View Demo

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" />
View Demo

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    5 Ways that CSS and JavaScript Interact That You May Not Know About

    CSS and JavaScript:  the lines seemingly get blurred by each browser release.  They have always done a very different job but in the end they are both front-end technologies so they need do need to work closely.  We have our .js files and our .css, but...

  • By
    CSS @supports

    Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS.  What we end up doing is repeating the same properties multiple times with each browser prefix.  Yuck.  Another thing we...

Incredible Demos

  • By
    MooTools Font-Size Scroller with Cookie Save

    Providing users as many preferences as possible always puts a smile on the user's face. One of those important preferences is font size. I can see fine but the next guy may have difficulty with the font size I choose. That's why...

  • By
    Sexy Opacity Animation with MooTools or jQuery

    A big part of the sexiness that is Apple software is Apple's use of opacity. Like seemingly every other Apple user interface technique, it needs to be ported to the web (</fanboy>). I've put together an example of a sexy opacity animation technique...

Discussion

  1. Andrew

    Alas, non-functional on Android JB default browser.

  • David Walsh

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

  • Virendra Rajput

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

    • David Walsh

      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.

  • Robert

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

  • Karl Herrick

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

  • Neil Craig (@tdp_org)

    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.

  • Dennis

    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…

  • Alex

    I guess datalist should be styled invisible for old browsers?

  • Sergio Tapia

    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!

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

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

  • Beben Koben

    Good work in Mozilla v.17 :)

  • David Fox

    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” :-)

  • Gajus Kuizinas

    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.

  • 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! :)

  • libing wang

    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.

  • libing wang

    Sorry, I forgot to put my blog llink in the last comment: http://libing-wang.blogspot.com/2012/10/the-search-input-completion-in-eclipse.html

  • Gerard

    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!

  • Bruno

    The future is bright!

  • James Dinsdale

    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.

  • nisha

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

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

  • Mostafa Shahverdy

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

    • Akshay

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

  • vincent

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

  • 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?!

    • Akshay

      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.

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

  • lego

    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.

  • John

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

  • Santiago

    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

  • JP de Vries

    Whoops. I love but datalist does anyone know if browsers intend to optgroup support ?

  • Django

    Hello.
    I want to select more then one inputs from the data list.The second input should be placed next to the first input.
    Just like when we enter few letters to add the email recipient it autocompletes it and then we can add few more recipients to the same list to send emails.
    Can we do that in HTML?
    Thanks & regards!
    Excuse any typo’s.

  • narendra

    Hello.
    I want to select more then one inputs from the data list.The second input should be placed next to the first input.
    Just like when we enter few letters to add the email recipient it autocompletes it and then we can add few more recipients to the same list to send emails.
    Can we do that in HTML?
    Thanks & regards!
    Excuse any typo’s.

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