The list attribute is given to an INPUT element to bind it to a DATALIST which has an id attribute with the same value.
<input list="colors">
<datalist id="colors">
</datalist>
1 Like
Hi there, Just wondering the difference between -select- and -datalist- when it comes to code.
- In -select- this is the appropriate option option -value=“sesame”>Sesame</option-
- In -datalist- this is the appropriate option -option value=“Ketchup”></option-
Why doesn’t datalist require that second “Ketchup” like in the sesame option.
edit: - in place of opening and closing tags
is the drop down button supposed to be there in the data list field as shown in the example… because i can’t see it … i see the text field and filter results as i type… but no drop down button
Looks like the drop down arrow is present.
The dropdown in “bun section” is from an earlier topic of “select” input function…
what m askings is in the next topic of “datalist” the example shows a dropdown button on the datalist field.
But when i make a data list , the dropdown is not present (as shown in the picture i posted earlier)
and this one below is the example in the topic
hope i was clear…
Is there a way to use datalist without allowing custom text but keeping the text entry as a search bar?
When I do this on chrome I get the value and the text showing as options.
It’s pretty ugly. How would I fix it?
Here’s the code:
<label for="sauce">What type of sauce would you like?</label>
<input list="sauces" id="sauce" name="sauce">
<!--Add your code below-->
<datalist id="sauces">
<option value="ketchup">Ketchup</option>
<option value="mayo">Mayo</option>
<option value="burger sauce">Burger Sauce</option>
</datalist>
</section>
We see your OPTION elements are written as they would be for a SELECT element. In a DATALIST we normally don’t have a text node other than the value itself, so no closing tag is needed.
<option value="Ketchup">
Try that and let us know the result, please.