DEV Community

Autocomplete Dropdown using native HTML

Gábor Soós on November 25, 2019

You have probably seen dropdowns with autocomplete ability in jQuery, React, Vue, etc. Most of us would assume it is only possible with the help of...
Collapse
 
danielperna84 profile image
Daniel Perna

One problem - at least depending on the use case - with this is, that it allows to send other values than those specified in the list. F.ex. imagine a UI to configure the listening IP for a daemon where the available options would be populated by the IPs available on the host. With a regular select the user can only choose valid options, whereas the datalist-solution allows him to enter and submit a custom value, which could be invalid. Obviously the server side should handle such cases. But I still think this is important to know.

Collapse
 
tfisicaro profile image
Tim Fisicaro

When using a regular dropdown you can still change the option values and submit. Therefore you should always validate server side.

Collapse
 
brteller profile image
Brandon Teller

Yes, but that's missing the point. Even if you validate server side, having someone being able to submit a freeform text field defeats the purpose of a drop down which is to select pre determined values with text fields. Sure, you don't want bogus data going into the server, but ensuring the data is formatted before the server check is almost always necessary on the front end as well.

Collapse
 
midasxiv profile image
Midas/XIV • Edited

try this.


<input list="europe-countries" placeholder="Start typing..." type="email" multiple>

Basically on pressing comma you can view the drop-down again and select from the list.

Collapse
 
zakius profile image
zakius

Tried ,, ., ; on Waterfox Classic and chrome (yuck) and no success, are you sure it works?

Collapse
 
marcellothearcane profile image
marcellothearcane

😱😵😍

Collapse
 
sonicoder profile image
Gábor Soós

I felt the same...is this some kind of sorcery? 🧙‍♂️

Collapse
 
deezy_jnr profile image
CuteKîd R2bees

I tried this code but it doesn't drop down . Can you help me out ?

Collapse
 
sonicoder profile image
Gábor Soós

Which browser?

Collapse
 
deezy_jnr profile image
CuteKîd R2bees

I'm using bracket editor on GoogLe chrome

Collapse
 
jjjimenez100 profile image
Joshua Jimenez

TIL. Good read! :)

Collapse
 
lesha profile image
lesha 🟨⬛️

Not working in FF for Android... (Or not working as intended)

It doesn't draw autocomplete dropdown, but when you press Enter, it selects first matching variant

Collapse
 
sonicoder profile image
Gábor Soós

On chrome mobile it seems fine...you click it and no dropdown?

Collapse
 
mommocmoc profile image
mommocmoc

Thanks for sharing Useful Information!!