DEV Community

Saugat Rai
Saugat Rai

Posted on • Edited on

How to make Custom <select> but without using select?

How can I make a custom select component but without using HTML tag? I have an input field and when searched it fetches data from API. The data are shown in separate div. I also tried datalist but no luck.

Alt Text

Top comments (4)

Collapse
 
binyamin profile image
Binyamin Green

Take a look on github, or at this repo specifically. That library explains how it creates custom dropdowns.

My gut feeling is that you do something where the select is still there but hidden. So the form receives information via the select element, but the GUI is created by something else.

Collapse
 
raisaugat profile image
Saugat Rai

Umm interesting. I'll look into that. Thank you

Collapse
 
kvsm profile image
Kevin Smith 🏴󠁧󠁢󠁳󠁣󠁴󠁿

Sounds like you need something like Select2 (select2.org)? If you'd rather implement it yourself, that should give you an idea of how to start.

Collapse
 
raisaugat profile image
Saugat Rai

Sure. I'll give it a try. :)