How to use React Autosuggest to build Combo Boxes with Auto Complete

Поділитися
Вставка
  • Опубліковано 2 гру 2024

КОМЕНТАРІ • 51

  • @compact1277
    @compact1277 3 роки тому

    Thanks so much, I was stuck figuring out how to implement auto suggest

  • @shaheenelt
    @shaheenelt 4 роки тому

    I have so far done this with jquery with no pain but with react I was in trouble and finally found something to overcome the hurdle. THANKS A LOT FOR GOOD CONTENT.

  • @ridl27
    @ridl27 5 років тому +7

    Okay, so now I will receive notifications about all of your new videos :D

    • @leighhalliday
      @leighhalliday  5 років тому +1

      Awesome :) Thanks for watching and taking the time to comment, Alex! I appreciate it.

    • @gaelcullen668
      @gaelcullen668 3 роки тому

      you probably dont give a shit but if you guys are bored like me atm then you can watch pretty much all the new series on InstaFlixxer. Been binge watching with my girlfriend for the last weeks xD

    • @ronankillian5350
      @ronankillian5350 3 роки тому

      @Gael Cullen Yup, I have been using instaflixxer for since december myself :D

  • @jd_addy
    @jd_addy 4 роки тому

    Also I'd just like to mention that you should probably change the title of your video. Most people call this a combobox or auto complete. I almost didn't find it because your video is called auto suggest.
    Thanks so much for the awesome tutorial

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Great suggestion!! Going to update it now :)

  • @vijaykumarreddyalavala3713
    @vijaykumarreddyalavala3713 4 роки тому

    I have watched your other videos too. You deserve a million subscribers

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Almost there!! Only 995,000 left to go! :D thank you!

  • @hassanad94
    @hassanad94 Рік тому

    Great video, great explaining. Thank you. :))

  • @Aggon88
    @Aggon88 5 років тому

    Thnx for all tuts Leigh, you're great at teaching!

    • @leighhalliday
      @leighhalliday  5 років тому +1

      Thanks Aggon88! I appreciate it. Glad you are enjoying the videos!

  • @jd_addy
    @jd_addy 4 роки тому

    This is a really excellent video honestly. Thanks for explaining with such clarity. I'm subscribed now and looking forward to more life changing content from you sir

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Thanks John-Dag :) I have another video you may enjoy which also uses a combo box: ua-cam.com/video/WZcxJGmLbSo/v-deo.html

  • @reaganmeant9858
    @reaganmeant9858 4 роки тому

    Saved me from having to read documentation...awesome stuff bro

    • @leighhalliday
      @leighhalliday  4 роки тому

      Don't deprive yourself of some documentation!! That's how I learn :D

  • @mateuszzdyb3547
    @mateuszzdyb3547 4 роки тому

    great stuff. thank you!

  • @jd_addy
    @jd_addy 3 роки тому

    Hi Leigh is there a way to restrict validation so that a user has to pick an option from the combobox?

    • @leighhalliday
      @leighhalliday  3 роки тому

      I would have 2 values maybe... the one in the text box, and a hidden field that stores the selected value. Then do a validation on the selected value.

  • @reaganmeant9858
    @reaganmeant9858 4 роки тому

    Would be awesome if u expanded the content on how to style the autosuggest component

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Hey Reagan! I suck at styling things, I don't think you'd want to see that video from me :D haha

    • @reaganmeant9858
      @reaganmeant9858 4 роки тому

      @@leighhalliday hahaha...anyway I got sorted by using your code here github.com/leighhalliday/react-forms-demo/blob/master/src/App.css....Thanks alot....Keep up the brilliant work......Your tuts on testing are great too......Cheers

  • @kongchingshien3028
    @kongchingshien3028 4 роки тому

    Hello. I have face a problem in displaying the country in front end which I added in database previously. I have define the data in my initialValues={{destination: destinationdata.destination ? destinationdata.destination : ' '}}. This works in other fromik field. Can you help me in this?

    • @leighhalliday
      @leighhalliday  4 роки тому

      Hey Kong! Does `destinationData.destination` contain the correct value? Does it have it immediately? Maybe don't render the form until you have finished loading the data from your DB?

  • @PierreAtman
    @PierreAtman 4 роки тому

    Hey nice video ! I just discover your channel, love it ! Just a question, isn't it more efficient to load the api result once and then filter those result as the user type to make fewer API calls ?

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Hey Pierre! Maybe it would have been in this case, but you can't always load all the data and filter client side. If there are 100k records in total, and the user only wants 50 of them, way better to let the database/backend filter that data I think rather than loading it all and doing it client side.

    • @PierreAtman
      @PierreAtman 4 роки тому

      @@leighhalliday good point. It depends on the amount of data you're loading ! 👍

  • @ajimimol
    @ajimimol 4 роки тому

    Do you have any video of multiple autosuggest?

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      Hey Ajimi! Sorry, I don't... that's something I haven't tried before.

    • @ajimimol
      @ajimimol 4 роки тому

      Leigh Halliday Thanks for the reply and you explained really well in this video.

  • @yaroslav.baronin
    @yaroslav.baronin 4 роки тому

    Thanks a lot, you helped

    • @leighhalliday
      @leighhalliday  4 роки тому

      Glad I was able to :) Thanks for saying hi, Yaroslav!

  • @Aiducateur
    @Aiducateur 4 роки тому

    thanks, really useful!

    • @leighhalliday
      @leighhalliday  4 роки тому

      Awesome! Glad it was able to help, Marc! Thanks for watching :)

  • @DeathHordes
    @DeathHordes 4 роки тому

    so this workds only with the exact same structure of API json?

    • @leighhalliday
      @leighhalliday  4 роки тому +1

      I think you could transform data prior to placing it into the form and prior to posting that form back to the server. I don't think it would have to match the APIs data structure.

  • @rockNbrain
    @rockNbrain 3 роки тому

    Tks bro

  • @anuraghazra4772
    @anuraghazra4772 5 років тому

    Nice. Btw the video thumbnails are made by you?

    • @leighhalliday
      @leighhalliday  5 років тому +1

      I wish... but no. The actual art is by www.artstation.com/jamesgilleard

    • @anuraghazra4772
      @anuraghazra4772 5 років тому

      @@leighhalliday ohh nice.. Thanks, btw just to be safe from copyright stuff I think you should credit the artist in the description. 🙂

    • @leighhalliday
      @leighhalliday  5 років тому +1

      Will do today. I did it on a few videos just forgot this one. Thanks for the reminder!

    • @anuraghazra4772
      @anuraghazra4772 5 років тому

      @@leighhalliday oh okay no worries 😊. btw love you videos. very useful for us, keep them coming ❤

  • @pedroapfilho
    @pedroapfilho 5 років тому

    Hey man! Nice content! I'm loving it! Do you have twitter?

    • @leighhalliday
      @leighhalliday  5 років тому +1

      Thanks Pedro! I do! @leighchalliday

  • @MattDuarte11
    @MattDuarte11 5 років тому

    I’ve used this autoSuggest API before. Personally I think it’s to much work to make a simple auto suggest. I had to pass in 4 or 5 functions for the API to work. Where as making my ow
    N only required 2 or 3 and a lot less code. Just my opinion.

    • @leighhalliday
      @leighhalliday  5 років тому

      Yea, no doubt. It was hard to do the video because I had to try to memorize all the functions and params each one received haha. I had notes on a sheet of paper beside me! That said, do you handle highlighting fragments, browsing with cursor, tabbed selection, etc... stuff that Autosuggest does out of the box? It's not impossible, but I imagine they handle a number of edge cases.

  • @mathisawesome618
    @mathisawesome618 4 роки тому

    great video! thank you very much