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, the rest is on me!
You can download the project source code from here: pezeshkzade.co...
Hope you enjoy it.
Consider subscribing...
Have a great day.

[@ReactWithMasoud]

You can download the project source code from here: pezeshkzade.com/blog/source-code/

[@akhileshh4832]

im unable to open this link

[@edmonkhachatryan5150]

Thank u my friend it was very helpful tutorial👋👋

[@7taztoons]

if you put fullName.includes(searchTerm) instead of fullName.startsWith(searchTerm) you can search on first and lastname in the same time

[@mehdi1169]

عالی بود مسعود

[@nhanngutrongrung9556]

Thank You so much❤❤❤❤❤

[@volkerh5709]

Really good and clear video :)

[@ananddarshan5911]

1.A list of items is to be shown when the user clicks on the input field.
2. As the user types, the items in the list should get filtered according to the input.
3. On clicking on an item, it should get added as a chip (ex. Marina Augustine) on the top and your input field should shift accordingly.
4. Once the item is added as a chip it should be removed from the list of items.
5. Every chip should have a cross (X) icon, clicking on it should remove the chip and add it back to the list.

[@ananddarshan5911]

Can you help me out for this point I see your video it is effective but can you help me out with this point or we can make a video tooo🙏

[@viswa327]

@@ananddarshan5911 Hi Anand, am also looking for the same assignment . please help me bro 🙏🙏🙏🙏🙏🙏🙏🙏🙏🙏 if you have a solution.

[@giorgikiladze1151]

thank you

[@googleaccount7252]

Why would you make a video just to hide the source code? are you ok in the head?

[@0tiii]

Few problems:
- No arrow navigation
- No result highlighting
- Result list will affect other element positions

[@ifaduolasamuel7144]

Hi, please the like to the codebase isn't working

[@ezeldesilva2717]

How about if the id is the one being search I got an error with starts with..thank you in advance

[@mr.rahimosaab2693]

Very good job boss... for beginners.. many thanks for help

[@helguuhucu]

Hi! Reading some of the comments made me super sad. How can some people have such negative attitude towards you? Cursing and demanding certain things as if you owed them something? It is a clear video, with clear English, and you can watch along the video and write the code, instead of demanding for things to get to you already 100% done. And if you really need the source code, you can ask for it politely.
Masoud, keep up the good work and I hope that you don't get discouraged by such comments. Have a great day :)

[@ReactWithMasoud]

Thanks bro, yes I will continue and try to improve my content

[@matt112fly]

your English is very understandable- I have no problem 👍 so weird that people say that its "weak" lol

[@prajanbhattarai3124]

short and to the point. love the video.

[@CLeovison]

Man even if it is a 2year old tutorial it was really helpful to me. Thank you so much for this

[@matt112fly]

waiting for part 2.. i made a search filter (not using your video ) but it only adds the first search from the top - ill check if your video helps fix it ;)

[@p1k1m4ru]

helped me a lot, thank you! great stuff. Works way better than the first one that indian guy explained.

[@ManojSharma-cz7mi]

thanks. Do you have any code just like (select > option) > selectpicker (same as boots tap jquery ) > Allselect deselect , search ?

[@yashbharadva4636]

If we have to add API from POSTMAN rather than the MOCK data then how it should be done..??? I am stuck at that thing..

[@tnhunters4647]

thanks bro

[@yunsivattha]

very good, i learn much from you. plrease, add more video

[@fredyholguin2525]

amazing video, short. to the point and very usefull

[@kwameappiah-kubi1128]

anyway to make this accessible and have keyboard navigation?

[@davidtojalvarez6424]

Amazing video, thanks

[@sainath3829]

thanks man

[@easywebsolution7044]

Really good Tutorial. it save my time , Thanks

[@umavijay9171]

Not able to access the source code link.

[@denismugane2765]

How can I make it a reusable component for my entire project

[@fabioalejandrocamargodiaz4838]

I know talk spanish so... Señor lo amo

[@kennedysithole5316]

That was helpful. Thank you..

[@charanshetty2776]

Love from India , Nice explanation

[@EnglishAdventures]

Thank you for this tutorial! Excellent, easy to understand, and concise.

[@jonathanmarois9009]

You should have explained your dependencies... especially the purpose of react-select.

[@bernardsamapoh3619]

Awesome!

[@williamramos3866]

os indiano vao dominar o mundo

[@shafeeqmenoth7001]

Thank you Masoud ..you have made my day

[@belahouelbatoul3846]

thank you so much

[@Joe-xo8ns]

Thanks

[@swayamshakthi]

Thank you

[@gemsy.net.reviews]

Awsome!

[@aabramek]

clear and straightforward, thanks

[@ahmadtalal8428]

thanks alot sir
reallly helpful it was

[@navjotsingh2457]

ty

[@simon9238]

Amoo masoud eshghi damet garm

[@majedyafa902]

Amazing, thank you!

[@gainsbrah9831]

Short and to the point

[@DonHaul]

If i unfocus the search bar, the dropdown stays. How can this be fixed?

[@us28363hdhd]

U can hide drop-down. When input focused u can show drop down.
Opacity 0
Visibility hidden

[@SimonFabcic]

​@@us28363hdhd
Did you try this?
What happened to me in this case is, that in when I click on dropdown line, the focus is no longer on input field and disapears.
So I can't select item from dropdown...

[@ionenetsa3264]

Where is the fucking source code? After being forced to subscrive to a newsletter and after I confirm my email I click on download source code and I end up in a sandbox with something that has absoulytely no relation with this video. Which, by the way is buggy and doesn´t work.
A very poor experience indeed.

[@ReactWithMasoud]

Hi sorry about that, I will fix the website soon, you can download the source code from here: codesandbox.io/s/clever-violet-vxupkq

[@ionenetsa3264]

@@ReactWithMasoud this would be useful for my successors, I already deleted the whole exercise and passed to next video. Anyway thanks.

[@Noor98709]

I appreciate You For teaching but your English language speaking is weak
Thanks alot

[@Itsme-hy6jr]

If you don't understand his speaking you should improve your listening skills because the video is completely clear and understandable.