4 ms·

datalist is one I stumbled upon and blew me away. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/We

by hk1337 2y ago

datalist is one I stumbled upon and blew me away. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist https://developer.mozilla.org/en-US/docs/Web/HTML/Element/da... It's not a replacement for select as you still need an input to tie it to but it seems to handle filtering a list of options nicely. Also, if you have two selects with the same list in it, you can do it once with datalist and have two inputs, say a list of clients with client_a and client_b for inputs. I don't quite care for how it displays the value, like if you put the ID as the value and the client name in the option element, you can filter by the ID or the name but the input will show the ID only.

bob1029 2y ago
I've tried using datalist with text inputs and it never quite worked out from a UX perspective. Users would always complain about weird quirks with how it populates & clears values. A normal <select> element with an "Other" option + conditional input element is much more predictable.
- hk1337 2y ago
  Yeah, for autocomplete it has a weird UX feel to it. Some of the other examples like using it with the slider and the color picker seem like they're useful.
stronglikedan 2y ago
It looks like the UI would clash with the browser's autofill recommendations.
lelandfe 2y ago
My frown continues to deepen at Apple's UI backslide as they crib more and more junk from iOS/iPadOS. I'm on Sonoma 14.5, and this is Safari 17.5. macOS Safari's <select>: https://imgur.com/a/05YWDCc https://imgur.com/a/05YWDCc macOS Safari's <datalist>: https://imgur.com/a/4f3JwuA https://imgur.com/a/4f3JwuA There are SO, SO, SO many things wrong with Safari's datalist element here. Esc doesn't close it (close from keyboard by switching tabs...). There's no hover effect on the options. The active background color is more saturated than the system's accent color (typical for iPadOS/Catalyst junk). There's no left/right margin, and no border radius, on the options. Option text isn't vertically centered. The font is different (it seems differently aliased? Perhaps just larger). The datalist element itself lacks the same border-radius of select. On select elements, selection does not wrap (down arrow with the last option active); on datalist it does. Here's an egregious one - when you zoom in with Cmd-+ a few times, this is how the <select> element looks: https://imgur.com/a/Vpu536j https://imgur.com/a/Vpu536j And this is <datalist>: https://imgur.com/a/JrfXLW9 https://imgur.com/a/JrfXLW9 Argh! I used to revere Apple for sweating the details. Their UI/UX quality inspired me to become a frontend dev. Today, they ship things that wouldn't pass Q/A at my worst jobs.
- hk1337 2y ago
  Yeah, the more I dig into it the more I see it's not all that great. It has some potential for some things but not necessarily for an autocomplete list. https://jsfiddle.net/nhu4zef2/ https://jsfiddle.net/nhu4zef2/ This is one occurs in every browser when if you want to have a list but send the ID for the item instead of the value, it shows the value in the list and you can search by the ID or the value but the result in the input shows just the ID. User's should be not be required to know the ID of something. Like say a list of clients where user's know them by name but necessarily by ID but the database links them by ID.
  - lelandfe 2y ago
    This just got so much worse with scrollbars. Select: https://imgur.com/a/fi1SPBJ https://imgur.com/a/fi1SPBJ Datalist: https://imgur.com/a/sTiQhPF https://imgur.com/a/sTiQhPF This looks exactly like an iOS control now. The multiply effect on the scrollbar is comically out of place.
- bargainbin 2y ago
  It does make you wonder, Safari recently had a burst in features where they modernised and even overtook Chromium/FF in some features, and then in the past year or so it’s languishing again. I do wonder if the metrics show the average person downloads Chrome straight away so they’re just not investing heavily in it? I mean anyway, who browses traditional websites any more, right…?
  - spartanatreyu 2y ago
    They've purposefully underinvested in Safari to force developers to create native apps for their platforms where Apple makes a sizeable cut of all sales and subscriptions rather than allowing developers to create a web-app that could have done the same thing where the developers reap all the rewards for their work. The only reason they had that burst of activity is that they needed to quickly catch up and save face in an attempt to prove to EU regulators that they weren't hampering developers. The EU didn't buy it and forced Apple to open up their devices to allow alternate app stores and browsers on their devices in the EU.
pseudosavant 2y ago
What a great find! I'll definitely be thinking through where this is appropriate to use.
Sateeshm 2y ago
Doesn't seem to work on Firefox Android
- malobre 2y ago
  https://bugzilla.mozilla.org/show_bug.cgi?id=1535985 https://bugzilla.mozilla.org/show_bug.cgi?id=1535985

by hk1337 2y ago

bob1029 2y ago

I've tried using datalist with text inputs and it never quite worked out from a UX perspective. Users would always complain about weird quirks with how it populates & clears values. A normal <select> element with an "Other" option + conditional input element is much more predictable.

hk1337 2y ago
Yeah, for autocomplete it has a weird UX feel to it. Some of the other examples like using it with the slider and the color picker seem like they're useful.

stronglikedan 2y ago

It looks like the UI would clash with the browser's autofill recommendations.

lelandfe 2y ago

My frown continues to deepen at Apple's UI backslide as they crib more and more junk from iOS/iPadOS. I'm on Sonoma 14.5, and this is Safari 17.5. macOS Safari's <select>: https://imgur.com/a/05YWDCc https://imgur.com/a/05YWDCc macOS Safari's <datalist>: https://imgur.com/a/4f3JwuA https://imgur.com/a/4f3JwuA There are SO, SO, SO many things wrong with Safari's datalist element here. Esc doesn't close it (close from keyboard by switching tabs...). There's no hover effect on the options. The active background color is more saturated than the system's accent color (typical for iPadOS/Catalyst junk). There's no left/right margin, and no border radius, on the options. Option text isn't vertically centered. The font is different (it seems differently aliased? Perhaps just larger). The datalist element itself lacks the same border-radius of select. On select elements, selection does not wrap (down arrow with the last option active); on datalist it does. Here's an egregious one - when you zoom in with Cmd-+ a few times, this is how the <select> element looks: https://imgur.com/a/Vpu536j https://imgur.com/a/Vpu536j And this is <datalist>: https://imgur.com/a/JrfXLW9 https://imgur.com/a/JrfXLW9 Argh! I used to revere Apple for sweating the details. Their UI/UX quality inspired me to become a frontend dev. Today, they ship things that wouldn't pass Q/A at my worst jobs.

hk1337 2y ago
Yeah, the more I dig into it the more I see it's not all that great. It has some potential for some things but not necessarily for an autocomplete list. https://jsfiddle.net/nhu4zef2/ https://jsfiddle.net/nhu4zef2/ This is one occurs in every browser when if you want to have a list but send the ID for the item instead of the value, it shows the value in the list and you can search by the ID or the value but the result in the input shows just the ID. User's should be not be required to know the ID of something. Like say a list of clients where user's know them by name but necessarily by ID but the database links them by ID.
- lelandfe 2y ago
  This just got so much worse with scrollbars. Select: https://imgur.com/a/fi1SPBJ https://imgur.com/a/fi1SPBJ Datalist: https://imgur.com/a/sTiQhPF https://imgur.com/a/sTiQhPF This looks exactly like an iOS control now. The multiply effect on the scrollbar is comically out of place.
bargainbin 2y ago
It does make you wonder, Safari recently had a burst in features where they modernised and even overtook Chromium/FF in some features, and then in the past year or so it’s languishing again. I do wonder if the metrics show the average person downloads Chrome straight away so they’re just not investing heavily in it? I mean anyway, who browses traditional websites any more, right…?
- spartanatreyu 2y ago
  They've purposefully underinvested in Safari to force developers to create native apps for their platforms where Apple makes a sizeable cut of all sales and subscriptions rather than allowing developers to create a web-app that could have done the same thing where the developers reap all the rewards for their work. The only reason they had that burst of activity is that they needed to quickly catch up and save face in an attempt to prove to EU regulators that they weren't hampering developers. The EU didn't buy it and forced Apple to open up their devices to allow alternate app stores and browsers on their devices in the EU.

pseudosavant 2y ago

What a great find! I'll definitely be thinking through where this is appropriate to use.

Sateeshm 2y ago

Doesn't seem to work on Firefox Android

malobre 2y ago
https://bugzilla.mozilla.org/show_bug.cgi?id=1535985 https://bugzilla.mozilla.org/show_bug.cgi?id=1535985