Comments on HTML5 Datalist

By: libing wang

2012-12-10T15:39:33Z

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

By: libing wang

2012-12-10T15:13:09Z

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.

By: Jos Gerrits

2012-12-10T14:35:28Z

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

By: Gajus Kuizinas

2012-12-05T17:26:01Z

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.

By: David Fox

2012-12-05T06:58:12Z

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

By: Beben Koben

2012-12-04T13:00:10Z

Good work in Mozilla v.17 :)

By: Simon

2012-12-02T20:38:05Z

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.

By: wil black

2012-12-02T17:02:37Z

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.

By: Sergio Tapia

2012-12-02T14:08:58Z

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!

By: Alex

2012-12-02T13:46:37Z

I guess datalist should be styled invisible for old browsers?

By: Dennis

2012-12-02T12:59:41Z

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…

By: Neil Craig (@tdp_org)

2012-11-30T21:35:17Z

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.

By: Karl Herrick

2012-11-30T21:22:56Z

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

By: Robert

2012-11-30T20:42:13Z

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

By: David Walsh

2012-11-30T20:01:08Z

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

By: David Walsh

2012-11-30T20:00:17Z

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.

By: Virendra Rajput

2012-11-30T19:44:00Z

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

By: Andrew

2012-11-30T19:38:59Z

Alas, non-functional on Android JB default browser.