Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
325
Multi select Autocomplete with chips
posted

Dear team,

I am looking for an Multi select autocomplete with chips as the selected items. And the data should be coming from remote api as the data would be very large. I see that there is a separate autocomplete and chips component available. Can you please guide us or provide with an sample similar to the picture attached.

Thanks

Parents
No Data
Reply
  • 700
    Verified Answer
    Offline posted

    Hello Rameez,

    Thank you for posting to Infragistics Community!

    I have been looking into your question and an approach I could suggest is using the IgxComboComponent as it provides multiselection and the possibility to search for a specific item through the combo search input. Apart from this, as it could be observed in our ComboBox Remote Binding topic here, the IgxComboComponent provides the possibility for remote data binding, which I believe is quite helpful for achieving your requirement about the data coming from a remote API. Furthermore, in order to display the selected items as IgxChip components, what I could suggest is templating the ComboBox input with an IgxPrefixComponent and wrapping the chips in it.

    Additionally, I have prepared a small sample in order to demonstrate how such behavior could be achieved. In the attached sample I have configured the combo using the abovementioned approach and I am using the combo’s dataPreload, searchInputUpdate and selectionChanging events, along with a custom remote service for retrieving the appropriate data from the remote API.

    On my side, everything works as expected and when opening the combo the data is being loaded successfully from the remote API. Also, when typing a certain value in the search input, the data is being filtered accordingly as the shown results are only those that start with the searched value (i.e., autocomplete is performed) and when selecting an item, it is being shown in the ComboBox input as an IgxChip.

    Here could be found my sample for your reference. Please test this approach on your side and let me know if you need any further assistance.

    Looking forward to hearing from you.

    Sincerely,
    Riva Ivanova
    Entry Level Software Developer

Children