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.

Thanks

Dear Customer,
Thank you for posting the inquiry to our forum.

We are afraid to say that we now have many inquiries in queue. We are making efforts to taking care of them in order of arrival, but it might take some more time until we can start the investigation about this support case.

Thank you in advance for your understanding.

Infragistics Developer Support

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

Hi Riva,

Sorry for the late reply! We have tested implementing your sample and it works for us! 

However I would have loved if it is achieved with autocomplete keeping in mind about the look and feel and usability. 

One more thing we observed is that when we want to filter data with where condition on multiple columns the results are not updated on the combo box list until we move the mouse or click somewhere! But the same is working well if the searched text is binded to "displayKey" of the combo. 

Other than the above said things I find your inputs helpful for the moment!

Thanks!

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.

Sincerely,
Riva Ivanova
Entry Level Software Developer