<3 <3 <3
I LOVE the datalist tag and appreciate anyone who helps evangelize it! It can also be combined with autocomplete='off' on the element that its used with so that you don't get annoying values in there. For instance if you have a list of employees and the type of the input is set to email, you wouldn't want all of your emails that you use to be autocompleted.
Also you can add stuff into option for better autocomplete.
<option firstname.lastname@example.org'>Arty Adams</option>
<option email@example.com'>Bobby Boi</option>
<option firstname.lastname@example.org'>Cathy Chatty</option>
<option email@example.com'>Dorthy Doraimon</option>
<option firstname.lastname@example.org'>Esther Enemy</option>
<option email@example.com'>Freddy Fishmonger</option>
<option firstname.lastname@example.org'>Genna General</option>
<option email@example.com'>Holly Hollandaise</option>
<option firstname.lastname@example.org'>Ingrid Ingot</option>
<option email@example.com'>Julia Jumper</option>
<label>Autocomplete Email(Scroll down in drop down to see your values):
<input type='email' list='emails' name='email'/>
<label>Autocomplete Off Email:
<input type='email' list='emails' name='email' autocomplete='off'/>
with this searching names, or email will work. Even partials like 'ty@examp' will work and only bring up Arty.
The above example can be seen in this fiddle: jsfiddle.net/t2qb90vu/
Thank you for sharing this with us.
No problem! I'm a real big fan of not using JS or adding custom logic where you can get away with it. As a result I'm a HUGE fan of the datalist tag for autocomplete and also the details tag for most accordions. Especially on smaller sites.
Glad I that you and others find this useful. :)
dev.to actually uses the details tag for its accordion to close comment threads! The little arrow on the left of comments is via the details tag. You can see it via inspect element! :D
Thanks! I was just in a desperate need for this kind of searchable list! :)
Glad to help! :D
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.