12 ms·
HTML Data List Element
- salzig 5y agoI suppose some experienced developer just found out that some interessting features have been added since 1996? another, not that well known, tag which is IMHO quite useful when you have to serve static pages <base>[0]. [0] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ba... Edit: 1996 is just a random reference, not actually checked. Edit2: Link to English MDN.
- lkuty 5y agoOr https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ba... for english
- salzig 5y agouh, missed that. Thanks.
- bondant 5y agoSometimes those interesting features are not easy to find. When looking up on how to do something for the web, one get tons of answers describing how to do it with javascript and usually with js frameworks. The simple methods (which do not cover all cases but are sometimes enough) are usually buried under. So unless beginner learn by heart all the html tags (and that is not beginner friendly) they won't know those basic features, so I think that's cool to have a reminder.
- salzig 5y agoAbsolutly, that was exact the feeling when i realised that datalist exist. How on earth could i miss that? The Internet is getting more and more "sources", but all of them seem to be almost direct copies of already existing source of information, just with a different layout.
- tannhaeuser 5y agoI'm not a fan of the whole WHATWG spec/process, but it has datalist and other not-so-well-known elements covered. If you prefer a succinct reference (rather than the full browser-melting spec), there are other other sources than WHATWG's spec or MDN helping with discoverability, such as mine (as a proper SGML DTD grammar, no less) [1]. [1]: <http://sgmljs.net/docs/w3c-html52-dtd.html http://sgmljs.net/docs/w3c-html52-dtd.html>
- rplnt 5y agoI absolutely hate the web dev community. Any HTML or JS related question was answered by "just use jquery" for maybe a decade.
- colejohnson66 5y agoThe jQuery cliche was such a meme: https://imgur.com/Q3mkcnl.gif https://imgur.com/Q3mkcnl.gif
- jonnycomputer 5y agoYeah, I didn't now about data-* attributes until about two years ago. I quickly leveraged it to make creating forms with branching less of hassle: instead of relying on complicated state to hide and show different divs, I simply used data-next and data-previous attributes to govern navigation through the tree.
- varrock 5y agoWhen you say branching, are you talking about a dynamic input, e.g., an email text input that appears after a subscribe checkbox is selected?
- jonnycomputer 5y agoWhen there are dependencies between questions in a form (e.g. only ask for date married if answered yes to married). Its confusing if those elements are visible when not needed, so yeah, becomes dynamic. Also, I used "tree" loosely. I meant something closer to a DAG.
- swiley 5y agoMost of the web seems like the devs are stuck in the early 2000s just with faster computers. I think part of it is stack overflow where 15 years ago the only way to do a lot of stuff was a couple functions full of jquery so that's what the "correct" answers say to do.
- japanuspus 5y agoJust used `base` today: building a whole reporting framework that needs to work from static files, and base is one of those little tricks that makes it all nicer. I am hitting a lot of weird little things running from static files, but I think it helps me quite a bit that I know html from when it was young -- hand crafting html for your angelfire site in the 1990's sort of prepared me for semantic tags...
- Cthulhu_ 5y agoHow is it different from <select>? Or is it so that you can enter a value OR select a premade list?
- tomcooks 5y agoif you write "lla" it gives you Vanilla, as opposed to a select which will require you to type "v"
- Phillips126 5y agoMy understanding is that is the combination of both a standard <input> and <select>. You can either choose one of the pre-defined options from the dropdown or add your own custom value in the input. I've tried hard to use this element on many applications but each time I always find it falling short of what I need it to do so I just end up creating a custom element. My biggest gripes are the lack of a max height attribute for the dropdown and inability to do much in terms of CSS styling. It would also be pretty slick if it was possible to select multiple values.
- thamer 5y agoI don't know if it's related to the way my browser implements it, but with <datalist> once I've picked an item it's then the only one that appears if I click again on the arrow to list the options. That's not the case with <select>, which _always_ lists all available choices regardless of the one currently selected. I can see this being confusing, and someone wondering where all the options went. They come back if you click to edit and then manually delete the text, but not everyone will think of it. The auto-complete feature is nice and <datalist> supports custom values that aren't in the preset list, but if you have a specific list of options and only want to allow those then it seems like <select> would be more appropriate.
- montroser 5y agoThe <datalist> element tries to address a common use case: it provides an autocomplete-enabled input so that as the user types, they see a filtered list of valid options. It's great for prototyping, but its extensibility is so limited that it's not actually useful for real production applications. For example, you can't bold the parts of the options in the dropdown that match the input the user has entered in the text box. You can't add images or other rich content in the options. You can't style the dropdown itself. You can't do fuzzy matching. You can't receive events as the user keyboard-navigates through options... It's a shame, since it's not a bad start, but users expect more than what <datalist> provides, and so we always have to go with a custom solution.
- tdy721 5y agoIt offers more than a bare input does. Why can’t I add Ajax for fuzzy matches? A custom drop down with keyboard events? Or I could hang all that off of an input. Or use a select? You’re saying stuff can’t be done. Out of the box sure? Why hate on it? This looks great to me.
- scrollaway 5y agoThe more complex input elements can't always be styled, don't always have events available for things you'd expect etc. A bare input allows you to do those things from scratch, whereas a custom one is useless if you can't build on top of it. It's the curse of complex UI elements on the web. Menu failed for similar reasons.
- beebeepka 5y agoBending other people's higher level solutions to your needs
- enlyth 5y agoI'm not OP but I share his frustration with so many of the built in HTML elements. All of them seem like they're stuck in the 90s and just plain impossible to use for modern UI requirements. As someone who has worked on a lot of UI, one example of a common pattern I've ran into everywhere I've worked at is pic related: https://i.ibb.co/sgyzqYS/picrelated.png https://i.ibb.co/sgyzqYS/picrelated.png It usually has at least the following features: - Mutli-select that displays each item selected in the row - Chevron indicates selection - User can type in to search - Asynchronous loading/search from an API (because too many elements at once) - Custom styling to match whatever your design framework is Yeah no wonder why it's easier to just use React for everything.
- SynasterBeiter 5y agoThis is nice, but it doesn't indicate the field is clickable or is a list, which could be done by always showing the chevron which currently shows up on hover. This can probably be done on CSS level, though.
- onion2k 5y agoIt has a chevron to indicate options when the input is focused as well as when the user hovers over it so there's no reliance on a mouse input. That seems to be enough to me. Why would the user need to see a chevron all the time, eg even when they're not interacting with the element?
- rovr138 5y agoTo know they can interact with it. If the field is optional they might just skip it to not type. Not everyone can hover over it.
- dublin 5y agoIt's needed when they're using a modern touchscreen computer instead of an ancient mouse-driven one, like I did when reading the link from this post this morning (Surface Pro undocked, so no keyboard). There is no clue the pull-down is even there otherwise!
- JamesSwift 5y agoAnd actually that chevron bit doesn't show on firefox apparently. I had to click in and press the down arrow to see the list. Otherwise it appears like its just a blank input field to me.
- tomcooks 5y agoLet's hope this is yet another non-skinnable element which is going to make frontend devs come up with innovative circles of hell ideas for designers and clients.
- salzig 5y agoit's a non visable element, used by already existing elements.
- peanut_worm 5y agoInteresting, on iOS it uses the predictive text thing above the keyboard to display the options
- phillipseamore 5y agoAnd sadly it doesn't update during typing (at least last time I checked in 14.x). I developed a quick PoC autocomplete for a language that has no support which updated datalist with word predictions. Works beautifully on Android but not on iOS.
- peanut_worm 5y agoSeems to be updating as I type for me
- phillipseamore 5y agoYeah! Just tested on 14.6 and 15 and it's working fine.
- Jermaine_Jabi 5y agoActs like a normal input on Android Firefox for me
- CodesInChaos 5y agoI don't like that this relies on globally unique ids to link elements. I would prefer the ability to specify some kind of relative path instead. (there are similar problems in other areas, like aria)
- whoisthemachine 5y agoYeah it's kind of awkward. My first assumption would have been that it would have had semantic similarities to a `<select>`, ie <input type="datalist"> <option>a</option> </input>
- CodesInChaos 5y agoAFAIK <input> is hardcoded as self-closing in the html5 parser.
- whoisthemachine 5y agoHm interesting... presumably this could be changed though? We aren't locked to <input> following one convention, are we?
- chrismorgan 5y ago<input> has been an empty element right from the start, meaning it mustn’t have any children. (And the HTML syntax enforces this.)
- AbsoluteDestiny 5y agoEvery linked element relies on ids: anchors, the label for attribute, all of the aria-labelledby, controls, describedby etc. Sure a full selector would be better but what level of css selectors do you support when writing the spec for user agents to know that can support the element?
- earthboundkid 5y agoThis is a general problem with HTML5. I end up having to write some kind of autoincrementIdCounter function in every frontend templating language I use to work around it. I wish it was on W3C's radar as a thing that makes life harder for developers.
- coldacid 5y agoI'm still waiting for a proper combo box out of HTML <input>. We're still stuck with Win16 style pairing of an input box with a select list underneath it.
- nfriedly 5y agoI'm running Firefox on Android and it doesn't seem to behave any different from a plain text input - no suggestions aside from the keyboard's predictions, and those are mostly things that aren't in the list. Chrome on Android shows the list of suggestions as soon as the element is focused, and typing filters it as expected.
- guavaNinja 5y agoThat's a bug in Firefox for Android that's being tracked https://bugzil.la/1535985 https://bugzil.la/1535985
- dublin 5y agoIt's a bug in Firefox, and affects the Windows version, not just Android. It's the worst sort of invisible and undiscoverable UI bug: clicking on the left/middle of the box is interpreted as wanting to do text input (with no menu of choices to select from), while clicking on the right end activates an apparently invisible "pull-down arrow" that will show you the list of allowable choices. Yuck!
- forgotmypw17 5y agoI'm using a browser based on Chromium 83, and it's the same story. I would not rely on this element for another 20 years or so.
- imvetri 5y agoThis is a old UI element and I have been using it a lot Just curios how it became top in HN ?
- EvRev 5y agoSomeone, or maybe a lot of people, must have failed an interview. Speaking from experience.
- TiredGuy 5y agoProbably because after all the time it's been around it still has some issues preventing wider usage, such as not working well in Firefox Android and lack of much customizability. Hopefully the increased publicity will help with some of this.
- trevvr 5y agoThe main problem with datalists are that browsers tried to work around them with autocomplete which overlay on top of the datalist. Ridiculous situation.
- Svetlitski 5y agoYou can set the attribute autocomplete=“off” on the corresponding <input> in order to prevent this from happening. See the relevant MDN page for more details: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes...
- hakube 5y agocan we feed items from an API to a data list?
- gitgud 5y agoHow have I never heard of this! It's like a native autocomplete-like select box. These are usually implemented in JS... Also seems to be [1] widely supported with around 95% of all internet browsers supporting it. [1] https://caniuse.com/datalist https://caniuse.com/datalist
- dkzlv 5y agoUnfortunately, it's not that good. There are a lot of strange and inconsistent behaviors related to this tag. That's why nobody uses it, and that's why you've never heard of it. Imo, it's only suitable for ultra-narrow use cases, mostly prototyping.
- postalrat 5y agoIf people start using it maybe it will get some love.
- Phillips126 5y agoI felt the same way when I discovered this element about a year ago. Each time I try to use it I always find it falling short of what I need it to do. It's incredibly limited in what can be styled with CSS, doesn't have the ability to have multiple values and there is no max-height to the dropdown. I've seen the dropdown grow so large it clips out of the browser itself - which might have been a bug that is now resolved.
- vsskanth 5y agoDoesn't seem to work on Firefox Android for me
- robofanatic 5y agoIt's a confusing element. When you click, it opens a dropdown of elements giving a feel of a normal <select> element. But once you select an element you can't change it unless you delete what you have selected.
- pkphilip 5y agoIt would have been good to have a way of defining a method that can return the values instead of pointing to a static list. Also, perhaps a way of having a method for handling the display via a method and/or div. example: <input list="ice-cream-flavors" id="ice-cream-choice" match="findMatch()" displayMatches="displayMatches()" name="ice-cream-choice" /> <div id="match"> <label>{match.id}</label> <img src="{match.imageUrl}"/> <p>{match.value}</p> </div> But then HTML itself would need to have a templating syntax which works on data including having the ability to do conditional branching, looping, pattern matching etc... which may not have been a bad idea. But then you may be reinventing javascript :)
- timw4mail 5y agoI wish the options for the datalist behaved the same way as selection options, where you can separate the values from the labels. Every major browser has different behavior. Chrome shows the child(label) and value, Firefox shows the child, and Edge shows the value.
- uses 5y agoHaving made websites since 2004, I was very mindblown when I found out about this a few months ago. Having tried it out, I was very mindblown at the several basic usability problems and lack of customizability, meaning I can never use it. Don't understand how this made it all the way into browsers. It's strange how there's this large gap between what developers need and what ends up in the browser. It's a lot better than it was though.
- kadomony 5y agoFor the developers here claiming about the severe lack of features (bolding fuzzy search matches, etc.), is this addressable through extending the default element through something like Lit or Stencil? I'm hopeful that my team's design system can utilize/inherit a majority of the standard components and extend their functionality without a complete rewrite being necessary.
- criveros 5y agoI will continue to use MaterialUI's Autocomplete.