Search Bar with suggestions and filter in react for beginners

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 62

  • @ReactWithMasoud
    @ReactWithMasoud  Год назад +1

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

    • @akhileshh4832
      @akhileshh4832 7 месяцев назад +2

      im unable to open this link

  • @CLeovison
    @CLeovison 3 месяца назад

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

  • @7taztoons
    @7taztoons 2 года назад +18

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

  • @helguuhucu
    @helguuhucu Год назад +2

    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
      @ReactWithMasoud  Год назад

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

  • @mr.rahimosaab2693
    @mr.rahimosaab2693 Месяц назад

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

  • @prajanbhattarai3124
    @prajanbhattarai3124 2 года назад +6

    short and to the point. love the video.

  • @youngboat3493
    @youngboat3493 Месяц назад

    Hey man , thank you for your work , it’s awesome I have been helped

  • @EnglishAdventures
    @EnglishAdventures Год назад

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

  • @p1k1m4ru
    @p1k1m4ru 8 месяцев назад

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

  • @matt112fly
    @matt112fly 2 года назад +2

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

  • @shafeeqmenoth7001
    @shafeeqmenoth7001 Год назад

    Thank you Masoud ..you have made my day

  • @charanshetty2776
    @charanshetty2776 Год назад

    Love from India , Nice explanation

  • @easywebsolution7044
    @easywebsolution7044 11 месяцев назад

    Really good Tutorial. it save my time , Thanks

  • @edmonkhachatryan5150
    @edmonkhachatryan5150 Год назад

    Thank u my friend it was very helpful tutorial👋👋

  • @fredyholguin2525
    @fredyholguin2525 2 года назад +2

    amazing video, short. to the point and very usefull

  • @0tiii
    @0tiii 6 месяцев назад +1

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

  • @fabioalejandrocamargodiaz4838
    @fabioalejandrocamargodiaz4838 Год назад

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

  • @yunsivattha
    @yunsivattha 7 месяцев назад

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

  • @aabramek
    @aabramek Год назад

    clear and straightforward, thanks

  • @kennedysithole5316
    @kennedysithole5316 8 месяцев назад

    That was helpful. Thank you..

  • @ezeldesilva2717
    @ezeldesilva2717 Месяц назад

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

  • @matt112fly
    @matt112fly 2 года назад +1

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

  • @gainsbrah9831
    @gainsbrah9831 2 года назад

    Short and to the point

  • @ManojSharma-cz7mi
    @ManojSharma-cz7mi Год назад

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

  • @ifaduolasamuel7144
    @ifaduolasamuel7144 8 месяцев назад

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

  • @davidtojalvarez6424
    @davidtojalvarez6424 2 года назад +1

    Amazing video, thanks

  • @bernardsamapoh3619
    @bernardsamapoh3619 4 месяца назад

    Awesome!

  • @kwameappiah-kubi1128
    @kwameappiah-kubi1128 Год назад

    anyway to make this accessible and have keyboard navigation?

  • @mehdi1169
    @mehdi1169 Год назад

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

  • @denismugane2765
    @denismugane2765 Год назад

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

  • @gemsy.net.reviews
    @gemsy.net.reviews Год назад

    Awsome!

  • @simon9238
    @simon9238 Год назад

    Amoo masoud eshghi damet garm

  • @yashbharadva4636
    @yashbharadva4636 2 года назад

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

  • @majedyafa902
    @majedyafa902 2 года назад

    Amazing, thank you!

  • @ahmadtalal8428
    @ahmadtalal8428 2 года назад

    thanks alot sir
    reallly helpful it was

  • @umavijay9171
    @umavijay9171 8 месяцев назад

    Not able to access the source code link.

  • @nhanngutrongrung9556
    @nhanngutrongrung9556 Год назад

    Thank You so much❤❤❤❤❤

  • @jonathanmarois9009
    @jonathanmarois9009 2 года назад +4

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

  • @volkerh5709
    @volkerh5709 2 года назад

    Really good and clear video :)

    • @ananddarshan5911
      @ananddarshan5911 2 года назад

      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
      @ananddarshan5911 2 года назад

      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
      @viswa327 2 года назад

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

  • @tnhunters4647
    @tnhunters4647 4 месяца назад

    thanks bro

  • @sainath3829
    @sainath3829 2 года назад +1

    thanks man

  • @belahouelbatoul3846
    @belahouelbatoul3846 Год назад

    thank you so much

  • @Joe-xo8ns
    @Joe-xo8ns Год назад

    Thanks

  • @DonHaul
    @DonHaul 2 года назад +1

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

    • @us28363hdhd
      @us28363hdhd 2 года назад

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

    • @SimonFabcic
      @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...

  • @giorgikiladze1151
    @giorgikiladze1151 2 года назад

    thank you

  • @williamramos3866
    @williamramos3866 Год назад

    os indiano vao dominar o mundo

  • @navjotsingh2457
    @navjotsingh2457 2 года назад

    ty

  • @PSRENJITH
    @PSRENJITH 19 дней назад

    hello

  • @googleaccount7252
    @googleaccount7252 Год назад

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

  • @ionenetsa3264
    @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
      @ReactWithMasoud  Год назад +1

      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
      @ionenetsa3264 Год назад

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

  • @Noor98709
    @Noor98709 2 года назад

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

    • @Itsme-hy6jr
      @Itsme-hy6jr Год назад +4

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

  • @swayamshakthi
    @swayamshakthi Год назад

    Thank you