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
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
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
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 ?
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
Just the ui I’m assuming something like this ?
yup
Just the Input + autcomplete dropdown
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 ?
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
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
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
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...
Here is a react version
Thats interesting, will look thanks.