Component similar to google input

Hi, I am looking for component similar to google browser input. You can type something and you will get autcomplete. I was looking throught internet (I am using shadcn-ui) but wasn't able to find anything like this. I endup with react-select and <input/> as w input. Do you guys have any ideas if there is such component available somwhere in react? Thanks
13 Replies
stoney
stoney13mo ago
I don’t use react but you can design an input field using css. For the autocomplete function you can implement using api’s for the database you are working with
interpod
interpod13mo ago
The problem is that implementing it by hand, all of the accesability, focusing, keyboard traversal is hard a tried and spend too much time on this and achived mor or less nothing XD
stoney
stoney13mo ago
Are you trying to create a search function for a database ? Or are you working with an external database that already has one your just working with an api ?
interpod
interpod13mo ago
Api doesn't matter. UI component is all what i need 😄 like I said, right now I am using react-select which has AsyncSelect component it is not effective and I had to make some weird hacks to make it working like I want
stoney
stoney13mo ago
Just the ui I’m assuming something like this ?
No description
interpod
interpod13mo ago
yup Just the Input + autcomplete dropdown
stoney
stoney13mo ago
Well you can do this with javascript or css its just styling i think you can find a tutoral In html create an input element Then style it using css and add the dropdown function using react let me try to see if i can find an example in code pen before i write anything I use vanilla js so my example will be vanilla js you’ll figure out how to do it in react I’m still trying to move from ruby to react @Interpod are you working with a ton of data ?
interpod
interpod13mo ago
nope, to be honest, even if I implement this by hand there i a lot of work to make this accessible like keyboard traversal etc
stoney
stoney13mo ago
https://youtu.be/OXd_wv7Qi4g?si=GTrrxMECjjg4KMJe this is a vanilla js tutorial that seems to have everything your looking for
Devistry
YouTube
Autocomplete input dropdown | HTML, CSS, JS
Create a autocomplete input dropdown with HTML, CSS and JavaScript. Join the community on Discord: https://discord.gg/cWqA6hPr
stoney
stoney13mo ago
Your overcoplicating it i think it just needs to loop the data to find the data that mathes the letters you have input then display it if your working with very few data you can just use a datalist but i would only recommend this if your data is less than 10 items otherwise just use js react or vanilla
stoney
stoney13mo ago
React with Masoud
YouTube
Search Bar with suggestions and filter in react for beginners
In this tutorial, I show you how to build a react search bar with suggestions. If you want to build a react search bar with autocomplete or suggestions feature from scratch, this video can help you. If this video gets more than 50 likes, then I make the second episode of it. Please share what you exactly are looking for and put a thumbs up, th...
stoney
stoney13mo ago
Here is a react version
interpod
interpod13mo ago
Thats interesting, will look thanks.
Want results from more Discord servers?
Add your server