How to implement multicolumn filtering with remote data using JavaScript ComboBox Component?

Implementing multicolumn filtering in a JavaScript ComboBox component can significantly enhance user experience, especially when dealing with remote datasources. This functionality allows users to filter options based on multiple data fields, providing a more dynamic and responsive interface. This guide provides a comprehensive walkthrough on how to achieve multicolumn filtering using remote data in a ComboBox Component.

Overview

To achieve multicolumn filtering with ComboBox, we’ll utilize an ItemTemplate for displaying data in multiple columns and a filtering event to apply the search criteria across the desired columns.

Implementation:

In the filtering event, a predicate is constructed to filter the necessary fields based on the filtered text. The or operator is employed to add multiple fields to check if the filtered text is present in any of them. These predicate conditions are then applied to the query using the where method. Finally, the query is executed using DataManager, and the ComboBox’s data is updated accordingly using the updateData method.

var comboBoxObj1 = new ej.dropdowns.ComboBox({
  dataSource: new ej.data.DataManager({
    url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
    adaptor: new ej.data.ODataV4Adaptor(),
    crossDomain: true,
  }),
  query: new ej.data.Query()
    .select(['ContactName', 'CustomerID', 'ContactTitle'])
    .take(10),
  placeholder: 'Select a name',
  fields: { value: 'CustomerID', text: 'ContactName' },
  popupHeight: '200px',
  allowFiltering: true,
  itemTemplate:
    '<table>' +
    '<tbody>' +
    '<tr style="width: 100%; padding: 6px;">' +
    '<td style="width: 50px; padding: 6px;">${CustomerID}</td>' +
    '<td style="width: 150px; padding: 6px;">${ContactName}</td>' +
    '<td style="width: 100px; padding: 6px;">${ContactTitle}</td>' +
    '</tr>' +
    '</tbody>' +
    '</table>',
  filtering: (e) => {
    e.preventDefaultAction = true;
    var data = new ej.data.DataManager({
      url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Customers',
      adaptor: new ej.data.ODataV4Adaptor(),
      crossDomain: true,
    });
    var predicate = new ej.data.Predicate('ContactName', 'Contains', e.text);
    predicate = predicate.or('CustomerID', 'Contains', e.text);
    predicate = predicate.or('ContactTitle', 'Contains', e.text);
    var query = new ej.data.Query().take(3);
    query = e.text != '' ? query.where(predicate) : query;
    data
      .executeQuery(query) 
      .then((event) => {
        dataValue = event.result;
        e.updateData(dataValue, query); 
      })
      .catch((error) => {
        // Handle errors appropriately
        console.error(error);
      });
  },
});

comboBoxObj1.appendTo('#customers');

Sample Implementation

For a practical example of the implementation, please refer to the provided sample on StackBlitz:

Multi-Column Search Sample

Additional References

• Predicate API Documentation
• ItemTemplate API Documentation
• Update Data API Documentation
• Execute Query API Documentation

Conclusion​

I hope you enjoyed learning about how to implement multicolumn filtering with remote data using JavaScript ComboBox Component.

You can refer to our JavaScript ComboBox feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript ComboBox example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!