DEV Community

9 Extremely Useful HTML Tricks

Klaus on December 12, 2019

HTML has plenty of practical secrets that might come in handy. But I do want to make sure that the site is working on Internet Explorer and other ...

Read full post

Sophie The Lionhart • Dec 12 '19 • 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>

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/

Sven Varkel • Dec 12 '19

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

Sophie The Lionhart • Dec 12 '19

Glad to help! :D

Klaus • Dec 12 '19

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

Sophie The Lionhart • Dec 12 '19

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

Ian Wijma • Dec 12 '19

The map tag I have seen before in legacy websites. Where the Devs where lazy and put an image of an menu in the headers. And made it clickable using a map. And people needed to shuffle some items around... In the image...

Klaus • Dec 12 '19

Such a classic example of a good concept used in wrong way.
Thank you for sharing that.

Massimo Artizzu • Dec 12 '19

Man, last time I've used <map> was, like, last century... 😂
Pretty much abandoned and with a weird interface, it's still completely supported. It was actually pretty advanced at that time.