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

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.

Sincerely,
Riva Ivanova
Entry Level Software Developer