Filtering in EJ2 JavaScript MultiColumn ComboBox control

14 Jun 20245 minutes to read

The MultiColumn ComboBox has built-in support to filter the data items, which allows users to filter the list of items based on their input. The filter operation starts as soon as you start typing characters in the component. The filtering can be disabled by setting the allowFiltering to false. By default the value is true.

Change the filter type

You can change the filter type by using the filterType property. The filterType supports filtering options such asStartsWith, EndsWith and Contains.

In the following example, data filtering is done with EndsWith type.

var empData = [ 
  { "EmpID": 1001, "Name": "Andrew Fuller", "Designation": "Team Lead", "Country": "England" },
  { "EmpID": 1002, "Name": "Robert", "Designation": "Developer", "Country": "USA" },
  { "EmpID": 1003, "Name": "Michael", "Designation": "HR", "Country": "Russia" },
  { "EmpID": 1004, "Name": "Steven Buchanan", "Designation": "Product Manager", "Country": "Ukraine" },
  { "EmpID": 1005, "Name": "Margaret Peacock", "Designation": "Developer", "Country": "Egypt" },
  { "EmpID": 1006, "Name": "Janet Leverling", "Designation": "Team Lead", "Country": "Africa" },
  { "EmpID": 1007, "Name": "Alice", "Designation": "Product Manager", "Country": "Australia" },
  { "EmpID": 1008, "Name": "Bob", "Designation": "Developer", "Country": "India" },
  { "EmpID": 1009, "Name": "John", "Designation": "Product Manager", "Country": "Ireland"},
  { "EmpID": 1010, "Name": "Mario Pontes", "Designation": "Team Lead", "Country": "South Africa" },
  { "EmpID": 1011, "Name": "Yang Wang", "Designation": "Developer", "Country": "Russia" },
  { "EmpID": 1012, "Name": "David", "Designation": "Product Manager", "Country": "Egypt" },
  { "EmpID": 1013, "Name": "Antonio Bianchi", "Designation": "Team Lead", "Country": "USA" },
  { "EmpID": 1014, "Name": "Laura", "Designation": "Developer", "Country": "England" },
  { "EmpID": 1015, "Name": "Carlos Hernandez", "Designation": "Developer", "Country": "Canada" },
  { "EmpID": 1016, "Name": "Lily", "Designation": "Product Manager", "Country": "France" },
  { "EmpID": 1017, "Name": "Tom Williams", "Designation": "Developer", "Country": "Ukraine" },
  { "EmpID": 1018, "Name": "Grace", "Designation": "Developer", "Country": "Australia" },
  { "EmpID": 1019, "Name": "Olivia", "Designation": "Team Lead", "Country": "Ireland" },
  { "EmpID": 1020, "Name": "James", "Designation": "Developer", "Country": "China" },
];

var columnsData = [
  { field: 'EmpID', header: 'Employee ID', width: 90 },
  { field: 'Name', width: 90, header: 'Name' },
  { field: 'Designation', header: 'Designation', width: 90 },
  { field: 'Country', header: 'Country', width: 70 }
];

var multiComboBoxObject = new ej.multicolumncombobox.MultiColumnComboBox({
  dataSource: empData,
  columns: columnsData,
  fields: { text: 'Name', value: 'EmpID' },
  allowFiltering: true,
  filterType: 'EndsWith'
});

multiComboBoxObject.appendTo('#multicolumn');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 MultiColumn ComboBox</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="styles.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/32.1.19/material.css" rel="stylesheet" />

    <script src="https://cdn.syncfusion.com/ej2/32.1.19/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>

    <div id='container' style="margin:50px auto 0; width:500px;">
        <br>
        <input type="text" tabindex="1" id='multicolumn' />
    </div>
    
    <script src="index.js" type="text/javascript"></script>
</body>

</html>