DEV Community

Discussion on: 9 Extremely Useful HTML Tricks

View post
Collapse
 
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@example.com'>Arty Adams</option>
    <option value='bobby@example.com'>Bobby Boi</option>
    <option value='cathy@example.com'>Cathy Chatty</option>
    <option value='dorothy@example.com'>Dorthy Doraimon</option>
    <option value='esther@example.com'>Esther Enemy</option>
    <option value='freddy@example.com'>Freddy Fishmonger</option>
    <option value='genna@example.com'>Genna General</option>
    <option value='holly@example.com'>Holly Hollandaise</option>
    <option value='ingrid@example.com'>Ingrid Ingot</option>
    <option value='julia@example.com'>Julia Jumper</option>
</datalist>
<label>Autocomplete Email(Scroll down in drop down to see your values): 
  <input type='email' list='emails' name='email'/>
</label>
<br>
<label>Autocomplete Off Email: 
  <input type='email' list='emails' name='email' autocomplete='off'/>
</label>
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: jsfiddle.net/t2qb90vu/

Collapse
 
svenvarkel profile image
Sven Varkel •

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

Collapse
 
samuraiseoul profile image
Sophie The Lionhart •

Glad to help! :D

Collapse
 
razgandeanu profile image
Klaus •

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

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

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