Filter DropDownList by Multiple Properties

Environment

Product	Progress® Kendo UI® DropDownList for jQuery
Operating System	All
Browser	All
Preferred Language	JavaScript

Description

How can I filter the DropDownList items by multiple properties?

Solution

1. Prevent the default behavior of the filter event.
2. Use the dataSource filter method to apply the custom filtering.

    <input id="customers" style="width: 100%;"/>            

    <script>
        $(document).ready(function() {
            $("#customers").kendoDropDownList({
                dataTextField: "ContactName",
                dataValueField: "CustomerID",
                filter: "contains",
                template: `<h3>Name: #: data.ContactName #</h3>
                                        <h4>ID: #: data.CustomerID #</h4>`,
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "https://demos.telerik.com/kendo-ui/service/Customers",
                        }
                    }
                },
                filtering: function(ev){
                    var filterValue = ev.filter != undefined ? ev.filter.value : "";
                    ev.preventDefault();

                  this.dataSource.filter({
                    logic: "or",
                    filters: [
                      {
                        field: "ContactName",
                        operator: "contains",
                        value: filterValue
                      },
                      {
                        field: "CustomerID",
                        operator: "contains",
                        value: filterValue
                      }
                    ]
                  });
                }
            });
        });
    </script>