The DropDownList provides a built-in filtering mechanism and a filtering directive as well as options for setting the minimum filter length.
To enable the filtering functionality, set the
filterable property to
true. Note that enabling the filtering functionality prevents the options list popup from closing when the DropDownList wrapper leaves the viewport, as it includes a focused input element for the user to provide his filter query.
When the filtering functionality is enabled, the component renders a filter input in the drop-down list. On every character input, the component triggers a
filterChange event. The event argument contains the typed string value that you can use to filter the source.
To filter the data after a delay, use a similar implementation. You can toggle the
loading property and provide the user with a visual indication of the filtering process.
The following example demonstrates how to update the data and open the DropDownList only after typing a minimum number of characters.
When the entire set of data is available on the client, you can use the built-in
kendoDropDownFilter directive to filter the data on user input. To configure the
kendoDropDownFilter directive, provide a
DropDownFilterSettings object to it.
DropDownFilterSettings enables you to set the case sensitivity of the performed search through the
caseSensitive property and the search logic operator which provides the