DEV Community


Discussion on: 9 Extremely Useful HTML Tricks

samuraiseoul profile image
Sophie The Lionhart • Edited

<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.

<datalist id='emails'>
    <option value=''>Arty Adams</option>
    <option value=''>Bobby Boi</option>
    <option value=''>Cathy Chatty</option>
    <option value=''>Dorthy Doraimon</option>
    <option value=''>Esther Enemy</option>
    <option value=''>Freddy Fishmonger</option>
    <option value=''>Genna General</option>
    <option value=''>Holly Hollandaise</option>
    <option value=''>Ingrid Ingot</option>
    <option value=''>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'/>
Enter fullscreen mode Exit fullscreen mode

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:

svenvarkel profile image
Sven Varkel

Thanks! I was just in a desperate need for this kind of searchable list! :)

samuraiseoul profile image
Sophie The Lionhart

Glad to help! :D

razgandeanu profile image
Klaus Author

That's amazing.
Thank you for sharing this with us.

samuraiseoul profile image
Sophie The Lionhart

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. :) 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