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.com/blog/source-c...
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

[@prajanbhattarai3124]

short and to the point. love the video.

[@EnglishAdventures]

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

[@fredyholguin2525]

amazing video, short. to the point and very usefull

[@shafeeqmenoth7001]

Thank you Masoud ..you have made my day

[@aabramek]

clear and straightforward, thanks

[@p1k1m4ru]

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

[@easywebsolution7044]

Really good Tutorial. it save my time , Thanks

[@7taztoons]

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

[@charanshetty2776]

Love from India , Nice explanation

[@majedyafa902]

Amazing, thank you!

[@davidtojalvarez6424]

Amazing video, thanks

[@edmonkhachatryan5150]

Thank u my friend it was very helpful tutorial👋👋

[@kennedysithole5316]

That was helpful. Thank you..

[@matt112fly]

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

[@gainsbrah9831]

Short and to the point

[@ahmadtalal8428]

thanks alot sir
reallly helpful it was

[@gemsy.net.reviews]

Awsome!

[@yunsivattha]

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

[@nhanngutrongrung9556]

Thank You so much❤❤❤❤❤

[@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 ;)

[@sainath3829]

thanks man

[@belahouelbatoul3846]

thank you so much

[@mehdi1169]

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

[@ManojSharma-cz7mi]

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

[@swayamshakthi]

Thank you

[@fabioalejandrocamargodiaz4838]

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

[@giorgikiladze1151]

thank you

[@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.

[@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

[@Joe-xo8ns]

Thanks

[@navjotsingh2457]

ty

[@simon9238]

Amoo masoud eshghi damet garm

[@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..

[@kwameappiah-kubi1128]

anyway to make this accessible and have keyboard navigation?

[@denismugane2765]

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

[@ifaduolasamuel7144]

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

[@0tiii]

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

[@jonathanmarois9009]

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

[@umavijay9171]

Not able to access the source code link.

[@williamramos3866]

os indiano vao dominar o mundo

[@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...

[@googleaccount7252]

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

[@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.

[@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.