Datalist support in Mobile Chrome

This post is more than 2 years old.

iOS8 launched yesterday and it has damn good updates in mobile Safari. I strongly suggest folks read Max Firtman's detailed review here: iOS 8 and iPhone 6 for web developers and designers: next evolution for Safari and native webapps. One thing missing, however, is support for datalist controls. I've blogged about them before and I really like how simple they make basic autocomplete controls. I noticed over on the CanIuse page for datalist that Android 4.4.3 and higher now support it. Here are some screen shots of it in action. Honestly it looks pretty much as you might expect, but I wanted to see for myself.

In this first screen shot, note there are not any initial indicators that the field will have autocomplete.

As soon as you click into the field, a downward triangle UI appears. This provides a hint that the field will autocomplete.

At this point, you can click the triangle for a complete list:

That list is scrollable of course. Typing a few letters provides a shorter version:

So... cool. However - in my testing I did see one instance where the UI of the list was rendered at the top of the viewport - not attached to the control at all. Clicking away and then back on the control corrected it. I'm not sure how bad of an issue that is but keep it in mind. I tried another demo from my blog post on dynamic datalist controls and one difference there was that I never got the initial dropdown triangle. However - my control in the demo is initially blank until you begin typing so that makes some sense.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Šime Vidas posted on 9/19/2014 at 4:28 AM

Interesting how in Firefox/Android, the list shows up immediately (when clicking on the field) and is visible at all times (as long as the field is focused). Even when scrolling the page (swiping up/down), the list is hidden during the scroll and then redrawn immediately after the scroll ends. I think I like Firefox's behavior better.

Comment 2 by Raymond Camden posted on 9/19/2014 at 6:05 AM

Dang, I'm ashamed to say I didn't even think about Firefox - thanks for reporting on that.

Comment 3 by Chip Toll posted on 4/13/2017 at 10:59 AM

Are there any iPad browsers that currently support a datalist? The caniuse page seems to indicate the only option that works are Android and Android Chrome.

Comment 4 (In reply to #3) by Raymond Camden posted on 4/13/2017 at 11:24 AM

If CanIUse says it, it's typically right. :\