Codecademy Forums

Datalist help!

Even when I type in the blank, nothing comes up. This happened back when the datalist element was first introduced, but I thought maybe it was just a glitch and moved on.

Click in the field (maybe press the down arrow key?). Does the list drop down?

Nothing drops down. Nothing pops up when I type in the field.

The example on this page works on a click, or using the down arrow…

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

Hmm. This example doesn’t give me a dropdown list or any options. I wonder if this a problem with my MacBook then?

That I wouldn’t know, I’m on a Windows 7 machine using FF. Do you have a choice of browsers? Chrome, maybe?

Just tried it with Chrome. It works! So the datalist element doesn’t work in Safari. Thanks for the suggestion!

3 Likes

Let’s check: datalist

If you can, upgrade your Safari browser. The Mar 24 release offers support for this and probably other new attributes.

2 Likes

Glad we got it sorted then :wink: . Keep up the good work all!

1 Like

Right again. I updated my laptop and the dropdown options are there now. Thanks again!

4 Likes

Hello everybody!
I am having the same problemwith the , the field seems empty depite I wrote down some options. (I’m on Chrome and still nothing showns up).
Here’s my code:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
    <title>Form a Story</title>
  </head>
  <body>
    <section id="top">
      <img src="https://s3.amazonaws.com/codecademy-content/courses/learn-html-forms/formAStoryLogo.svg" alt="Form A Story Logo">
    </section>

    <section id="main">
      <h1>Complete the Form -<br> Complete the Story!</h1>
      <hr>
      <!--Add your form below:-->
      <form action="story.html" method="GET">
        <label for="animal-1">Animal:</label>
        <input id="animal-1" name="animal-1" type="text" value="cat" required>
        <br>
        
        <label for="animal-2">Another Animal:</label>
        <input id="animal-2" name="animal-2" type="text" required>
        <br>
        
        <label for="animal-3">One More Animal:</label>
        <input id="animal-3" name="animal-3" type="text" required>
        <br>
        
        <label for="adj-1">Adjective (past tense)</label>
        <input id="adj-1" name="adj-1" type="text" required>
        <br>
        
        <label for="verb-1">Verb</label>
        <input id="verb-1" name="verb-1" type="text" required>
        <br>
        
        <label for="num-1">Number:</label>
        <input id="num-1" name="num-1" type="number" required min="1" max="9">
        <br>
        
        <span>Yes or No:</span>
        <input id="yes" name="answer" type="radio" value="yes" required checked>
        <label for="yes">Yes</label>
        <input id="no" name="answer" type="radio" value="no" required>
        <label for="no">No</label>
        <br>
        
        <label for="speed">Relative speed (ends in -er):</label>
        <select id="speed" name="speed" required>
          <option value="faster">Faster</option>
          <option value="quicker">Quicker</option>
          <option value="speedier">Speedier</option>
        </select>
        <br>
        
        <label for="quote">Motivational Quote:</label>
        <input id="quote" name="quote" type="text" required list="quote-choices">
        <datalist id="quote-choices">
          <option value="winner gets ice cream"></option>
          <option value="no homework for a week"></option>
          <option value="choosing dessert on the weekend"></option>
        </datalist>
        <br>
        
        <label for="message">Meaningful Message:</label>
        <textarea id="message" name="message" rows="8" cols="40" required minlenght="30" pattern="[a-zA-Z0-9]+">Replace this with your message</textarea>
        <br>
        
        <br>
        <input type="submit" value="Form My Story">
      </form>
    </section>
  </body>
</html>

Thank you very much for your precious help!
Have a good day!

Seems to be working ok for me on chrome. What exactly are you experiencing?

Hello @janneslohmeijer,

Thank you for answering!
What happens is that on the little arrow on the right of the form I have no options to choose. And also even if I start typing the options, nothing appears, it’s like empty.

Consider what ‘select’ does to declare the context. Does this parallel with ‘datalist’?

1 Like

Hello mtf,
I’m not sure to understand, what do you mean?
Should I use select on a datalist input?

I’m assuming the exercise is about datalist, so that would be what to use, as you have. What happens when you click inside the input field and type w?

All three options contain one or more w’s so all should display in a drop down selection menu.

Please post a link to the exercise so we can test your code.

1 Like

What I understand from @data9589448548’s post is that his drop down menu is not working as in see picture. However when I paste his code in to mine it seems to be working fine.

Anyways @mtf the link to the exercise https://www.codecademy.com/courses/learn-html/projects/form-a-story?action=resume_content_item

2 Likes

Hello both!
Thank you for cheking :slight_smile:
The question that it’s not working is the “Motivational Quote”, @janneslohmeijer, does it work on your computer too?
Have a nice day!

I am afraid it does. Both in Firefox and Chrome. Have you updated to the latest version?

motivational_quote

2 Likes

Hello @janneslohmeijer,
Yes, Chrome is updated, I’ll check on another PC at work.
It worked on your comuter so code is good, thank you so much for your time!
Have a nice day!