Autocomplete - Multi Select and load paginated dynamic data

fateh999 / react-native-paper-form-builder

React Native Paper Form Builder with inbuilt Validation, dropdown, autocomplete, checkbox, switch and radio inputs.

MIT License

113 stars 24 forks source link

Autocomplete - Multi Select and load paginated dynamic data #41

Open harshit9715 opened 3 years ago

harshit9715 commented 3 years ago

Hi there, I ❤️ your library. It's clean and easy to use.

Can you help me with understanding how to:

Multi-select items in the Autocomplete list.
Load dynamic data that will probably be paginated. here is the kind of implementation I am trying to do. I am also looking into react useQuery

appreciate your guidance. 😄

fateh999 commented 3 years ago

Thanks,

For creating a multiselect autocomplete list you can just modify the Autocomplete component and pass it in the config object.

Same approach can be used for infinite scroll, you can use react-query useInfinteQuery hook for this it is simple and easy to use . I will be adding sample codes for these scenarios soon in the documentation.

ioori commented 3 years ago

Hi , can you share a snippet of autocomplete component where multiselect works?

harshit9715 commented 3 years ago

Hi, can you share a snippet of autocomplete component where multi-select works?

I was trying to achieve this functionality and it looks like we need to modify both CustomAutoComplete and CustomTextInput. CustomAutoComplete will help us make the multi-selection and CustomTextInput should help us see those selections inside the TextInput. I am trying to change the TextInput to Chip component so its looks better. Here is the UI I am trying to achieve.

However, I am still facing issues in passing the options. Looks like I have to pass the options directly to the config object. If I do so I am unable to make the paginated API call in the selection screen.

visharma14 commented 2 years ago

how to load api data on option autocomplete please tell him