DEV Community

Saugat Rai
Saugat Rai

Posted on • Edited on

1 3

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

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay