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
Multi select Autocomplete with chips

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.


Parents Reply
  • 540
    Offline posted in reply to Rameez Sadikot

    Hello Rameez,

    Thank you for following up!

    I am glad that you find my suggestion helpful. Regarding your question, what I could say is that as shown in our Angular Autocomplete Example here, the autocomplete is a combination of an input with a layout of type text that has a reference to an IgxDropDownComponent, which holds different options for selection and is toggled when the input is clicked.

    Having this in mind, regarding your requirement for this functionality to be achieved with an autocomplete, what I could say is that this could be easily achieved as the IgxDropDownComponent provides the ability to wrap other components inside it, meaning that you could wrap a component that provides multiple row selection, e.g., an IgxGrid, and apply multi-column filtering as the grid provides the ability to filter all columns or specific ones via a filtering expression tree.

    Additionally, in order to demonstrate my suggestion, I have prepared a small sample where I am using the abovementioned approach. In the attached sample I am using an IgxInputGroup with igxToggleAction and igxDropDownItemNavigation directives set, which hold a reference to an IgxDropDownComponent, where an IgxGridComponent with row selection is wrapped. Further, by using a filtering expression tree, I am applying filtering on both the “ProductName” and “CategoryName” columns and the records which are retrieved are only the ones whose ProductName value or CategoryName value starts with the typed input. Initially, the CategoryName column is displayed in order to demonstrate that multi-column filtering is applied, but could be hidden by setting its hidden property to true.

    However, in case you prefer the implementation with the IgxComboBox, regarding the results not being updated in the IgxCombo list, what I could suggest is declaring a ChangeDetectorRef property in the component constructor and calling its detectChanges method. 

    Here could be found my sample for your reference.

    Thank you for using Infragistics components.

    Riva Ivanova
    Entry Level Software Developer

No Data