HTML5 Datalist
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!
Alas, non-functional on Android JB default browser.
That’s a renderer issue, not a standards issue.
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.
Doesn’t work in Safari 6.0.2 ? Works in Chrome and FF.
“Renderer issue” with Safari on iOS 6.0.1 / iPod Touch as well. :-(
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.
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…
I guess datalist should be styled invisible for old browsers?
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!
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.
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.
Good work in Mozilla v.17 :)
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” :-)
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.
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! :)
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.
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
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!
The future is bright!
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.
how cani retrive databse tables values in datalist tag.
plz any one give me source code for tht..
@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.
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.
Hi. Is it possible to limit the input to what’s in the datalist only ?
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.
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.
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.
How can i change background-color after selection? Emergency, please!
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
Whoops. I love but datalist does anyone know if browsers intend to optgroup support ?
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.
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.