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.

EditPreviewOpen In Dojo

    <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>