datalist behaves differently from select with handling option value/textContent

peminator commented 5 days ago

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist

What specific section or headline is this issue about?

Textual types

What information was incorrect, unhelpful, or incomplete?

missing important note - datalist does not work well for different value/textContent

option behaves differently from select - shows value as primary, not the tag textContent as select tag

many classic select tags use numeric id value + textual textContent node as label representation. There should be shown one example warning about this for everyone replacing such type of dataset, bc resulting list looks bad, and by now i found no reasonable pure stribute or css selector way to modify. Using javascript is too much of hassle for most basic users, and prone to fail if page may contain other js errors

many users hoping to find a simple replacement for select tag lose lot of time looking for answer, its worth mentioning it here either with warning, or with a simple solution if any exists

What did you expect to see?

expected solution to display textContent of option tag only, hiding the value attribute

Do you have any supporting links, references, or citations?

sample source to test the problem issue, which needs to be warned about

<label for="cityid">Choose city:</label>
<input list="cities" id="cityid" name="cityid" />
<datalist id="cities">
  <option value="How hide this value ????">Alabama</option>
  <option value="245">Buffalo</option>
  <option value="14568">Chicago</option>
</datalist>

Do you have anything more you want to share?

No response

MDN metadata

Page report details

* Folder: `en-us/web/html/element/datalist` * MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist * GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/element/datalist/index.md * Last commit: https://github.com/mdn/content/commit/bde0cb215d1d307c08678abe6623fc0d39f4cf7f * Document last modified: 2024-06-14T19:00:31.000Z

peminator commented 5 days ago

partial and weird solution is to use, not much expected to be, the atribute autocomplete="off" (or "on"), but then

single click to focus filed does not open the list, (needs second click to show it, or use text input to start search,
the styling of the list suddenly looks worse (no more nice padding in chromium based browser, probably temporary thing in works)

Josh-Cena commented 5 days ago

A select is different from a datalist; I don't know why you would be looking to switch from one to another. A select limits the number of possible inputs to a finite range, but a datalist just provides supplemental information to an input and allows quick selection of common inputs, but it's still an input that accepts arbitrary text input at the end of the day.

Nevertheless I think we should add an example showing what it's like.

peminator commented 4 days ago

as i wrote in original post, it behaves diferent from select but many ppl tend to try use it because its like a "select with autocomplete" - therefore i did not push this to changing the behave way, just to mention it as warning in this description, to warn people about the difference. bc many ppl may tend to use it a "select with search/autocomplete":

datalist allows also entering values not in list
datalist also uses "same as select" option tags, but displays them diferently (does usually hide text content of tag, instead displays option value + label attributes

mdn / content