Menu
I'm using the tag to create a list of suggestions for my search box, but I cannot select multiple values from the datalist. Currently, my HTML is:
<html> <form action="search_tags.php" method="GET"/> Search: <input type="text" multiple="multiple" name="search" list="tags" autocomplete="off" /> <datalist id="tags"> <option value="black"> <option value="gold"> <option value="grey"> <option value="pink"> <option value="turquoise"> <option value="red"> <option value="white"> </datalist> </html> It will offer suggestions for one item, but after that the suggestions won't suggest an autocomplete for my second option. I thought that the 'multiple' tag was all I needed (and what is suggested online) but it doesn't seem to have the desired effect.
Any suggestions?
351
The <datalist> tag is used to provide autocomplete feature in the HTML files. It can be used with an input tag so that users can easily fill the data in the forms using select the data.
Select input element presents options for the users from which they need to select one of them. On the otherhand, Datalist presents a list of suggested values to the associated input form (text) field and users are free to select one of those suggested values or type in their own value.
Multiple currently working only with input type="email" and only in Chrome and Opera
Look at this minimalist example:
input{width:500px}<input type="email" list="emails" multiple> <datalist id="emails"> <option value="[email protected]"> <option value="[email protected]"> <option value="[email protected]"> <option value="[email protected]"> </datalist> <br><br><br> <input type="text" list="texts" multiple> <datalist id="texts"> <option value="black"> <option value="gold"> <option value="grey"> <option value="pink"> <option value="turquoise"> <option value="red"> <option value="white"> </datalist>First input will be working, second NOT.
You only press comma, and list will appear as same as on click into input.
80
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
