# Filter DropDownList by Multiple Properties

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® DropDownList for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>All</td>
 </tr>
 <tr>
  <td>Browser</td>
  <td>All</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

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

```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: {
                            url: "https://demos.telerik.com/service/v2/core/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>
```