React Js Autocomplete Multi select example

user_10993965 0
Viewed 4130

I'm pretty new to React Js, I have a requirement for building AutoComplete Multiselect dropdown. Despite looking around for lot of examples, I was suggested not use any third party libraries. And pretty clueless how to start and proceed further.

My requirements are

  1. Have an input text box for typing names.
  2. Display sugggested name with checkbox.
  3. Upon checking the names, they must be display in an
  4. with an 'X' symbol(remove item)
  5. If I uncheck the name from the multiselect dropdown, it must be removed from the li.
  6. If I Click the 'X' it should be removed from the li and uncheck the item from dropdown list.
  7. And lastly , I need to display the selected items in the input fields like

enter image description here

I've been trying to implement this functionality but figure out how.

Can anyone please provide some reference and any guidance in implementing this functionality or any examples. It would be a great help.

Thanks

react-functional-component reactjs
1 Answers

I'm not sure why the recommendation against third party libraries. These component can get complicated fast.

I recommend you use a third party. Don't reinvent the wheel!

Something like https://github.com/JedWatson/react-select will do what you want. It has been around for years and has over 300 contributors and 2 million weekly downloads.

user_21332430
Related