Do we only need a value with datalists, and not text between the tags?

Why don’t we use text between the opening and closing tags here, like we did in the dropdown menu?

9 Likes

After struggling to figure out why the element wasn’t working right for me in this lesson, I finally discovered that the safari web browser does not support that specific element. Thought I would share in case others having the same frustration.

16 Likes

@jackolien This is just a beginner’s guess, but I think it’s excluded because if we add the in-between text, then the word is rendered twice on the list - it also shows the value, so I ended up with “ketchup … Ketchup”, “mayo … Mayo”, etc. when I added in the text to see what happens. Unfortunately that leaves us with uncapitalized words in the list…maybe CSS could alter that? I’m not that far yet :relaxed:

EDIT: Looking over the exercise again, in the left/instructions pane Codecademy capitalized their values in the datalist example, I wasn’t aware we were allowed to do that, but that fixes the list items being capitalized.

3 Likes

Gosh, thank you!! I was wracking my brain wondering why it wasn’t working.

Cheers!

The screenshot shows that I had a different output with the datalist than shown in the lesson text: for me, the HTML values appeared to the user! In the left of the screenshot it shows what it is supposed to be (what the lesson text shows), and in the right of the screenshot it shows how it actually rendered, with both the values and the text that was supposed to be shown. Is this normal? Does the codecademy lesson text image need to be updated? The previous form types shown to us did not have the value appear to the user (e.g. with the checkbox lesson).

Thanks.

3 Likes

pic

Well, I actually don’t know but to me it seems like it’s optional if the value corresponds to what you actually want to have shown.

In my example “honey” shows up like that even though I wrote nothing in the content of the element. While if I do write something then the content replaces what is shown. It could be handy if in the value you want to register you don’t want to take capitalization into account but actually want “Ketchup” to show up.

Not sure if that’s how it is for you or for others, but it might also be browser related? I’m using firefox.

7 Likes

Same in Safari as well. It only renders the word equaled to the value attribute. The word between the tags aren’t presented on the datalist under the input box

2 Likes

Safari now supports datalist from its version 12.1, released March 25, 2019, according to caniuse.com.

But as reported in this discussion thread, how the text inserted between the opening and closing tags shows up appears to differ across browsers…

1 Like

You can do it, but it’ll show up under the option, like this:

ketchup
ketchup

mayo
mayo

This trick is useful for websites that deal with limited-seating events or ticket sales, because the text between the opening and closing tags can set up to display a returned value. Other times, it can display a very brief description of the listed option . Outside of that, however, it’s confusing and takes up screen space… which is always at a premium, especially with tablets and smartphones.

6 Likes

I realize this is an old thread but it’s an interesting observation from karolisvaitkevicius6, I think he might be right about the end result being reflective of which browser you are using. I am using Chrome and like agentgenx I got a double up of “sauces” in my drop down list when I entered the text between the opening and closing tags.

Here is a link with the answer!

2 Likes

the difference between how the name is display has to do with how you wrote it down, if you put the exact same thing in the “value” label and in between the opening and closing tag, it will show you just one value, but instead if theres a difference then it will show two different values.

2 Likes

“When the form is submitted, the value of the <input> ‘s name and the value of the option selected, or what the user typed in, is sent as a pair.”
how will the system know the value that the user typed in if it is not from the values that are preseted?

why didn’t we write the value as a content between the option tag as in select lesson?

For the future viewers seeing this lecture on Mozilla, what you have to do as it’s a <datalist> and not a <select>, you have to start typing on the box to view the options predefined of the <datalist>. Do not worry, your code is alright!

1 Like

i think its better to use chrome as default. Safari is not very good at this.

Thanks, I’m having the same problem!

<form action="/example.html" method="GET">
      <label for="voice-assistant">What is your favourite voice assistant?</label>
      <input type="text" name="voice-assistant" id="voice-assistant" list="voice-assistants" autocomplete="off" />
      <datalist id="voice-assistants">
          <option value="Alexa">Amazon Alexa</option>
          <option value="Cortana">Microsoft Cortana</option>
          <option value="Siri">Apple Siri</option>
          <option value="Bixby">Samsung Bixby</option>
      </datalist>
    </form>

On Chrome, the output of the code above will be:
image

On Firefox, the output of the code above will be:
image

On Chrome, the content is displayed below the value attribute:
VALUE
CONTENT
image

On Firefox, only the content is displayed:
image

However, on both browsers, when you select any option, the input field gets filled with the value attribute of the selected <option> element, not the content

Chrome:
image

Firefox:
image

2 Likes

This is the exact thing I was looking for! Thanks :slight_smile: