TIL about Datalist and Display Limits

This post is more than 2 years old.

I've blogged about the <datalist> element a few times before (I'll link to them at the end of this article), and while support is ok (if you ignore Safari and iOS), it's one of my favorite HTML tags. It's pretty rarely used (as far as I can tell) but has a real good practical effect much like the <details> tag. As a spec, it is a bit in flux. When I brought it up last time on Twitter, Šime Vidas brought up how there are different implementations/specs in play. That's the focus of this article.

A few days ago, a reader reached out with the following problem:

i found your helpful example on datalist usage many mounts ago, in :


but now i have a question:

i get about 100 or more items from an ajax call and append (innerHTML) them into a datalist on my form. but when i searching my desire text, only 20 items show in dropdown. is there a way to increase number of datalist options more than 20?

I quickly built a demo with 20+ datalist items to see if I could recreate this. I was pretty sure it wasn't an issue with the Ajax call, but just the number of items. Here is the demo I created:

<!DOCTYPE html>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

  <input type="text" list="stuff">
  <datalist id="stuff">

Very exciting, right? I set this up on jsbin.com and you can run the demo yourself here: https://jsbin.com/cikuzab

So what did I see? I tested first in Chrome and it worked as expected. Just double clicking or typing A showed more than 20 results. I did see something odd when devtools was open - the UI goes "over" the window bounds:

But this looks to be an issue with responsive view in dev tools in general. Consider this date input:

As the UI for these controls are using (I believe) underlying OS controls, I don't think there is much that can be done about it - and frankly I'm a bit off topic now, but again, it works - 20+ items are shown.

I then tested in Microsoft Edge, and it worked just as well.

Finally, I tested in Firefox and here is where things get interesting:

First notice that it contracts the list UI a bit. I like this as it feels like a nicer design. My form only has one element, but in a real form, I think this would work a lot better. However...

Notice that I'm only seeing AA20. It looks like Firefox limits the list items to 20. This seems a bit weird since they are already keeping the UI nice and small and providing a scrollbar, but, yep, that's exactly what the reader ran into. If I type AA2, I can finally see all the matching items:

So yeah... there ya go. And as Šime had warned me on Twitter, this is definitely a feature that is a bit up in the air right now. Would I avoid datalist? No - I still think it is useful and it degrades nicely in my opinion, but definitely keep this in mind. If you were using Ajax along with the control, you could wait till you have enough input that has 20 or fewer matches, or even add a warning dynamically next to the control.

Are any of my readers using datalist? Here are some other articles I've written on the topic:

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 6/2/2017 at 4:32 AM

The issue seems to already have been fixed in Firefox Nightly (I noticed because that’s my default browser 😎). Maybe it was a temporary regression.

Regarding the element in general, I’m betting on web components. Hopefully, Firefox and Edge will add support for the v1 APIs by this time next year. A <data-list> custom element could provide a consistent UI and UX out of the box.

Comment 2 (In reply to #1) by Raymond Camden posted on 6/2/2017 at 1:12 PM

Interesting. It looked like something planned for me, but yea, as I said, with them already nicely limiting the size, it didn't make sense.