Filtering
The MultiSelect provides a built-in filtering mechanism and a filtering directive, and options for setting the minimum filter length.
Basic Configuration
To enable the filtering functionality, set the filterable
property to true
.
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.
Minimum Filter Length
The following example demonstrates how to update the data and open the suggestion box of the MultiSelect only after typing a minimum number of characters.
Built-in Directive
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 startsWith
and contains
options.
It is optional to provide the
DropDownFilterSettings
configuration object. By default, thekendoDropDownFilter
directive performs a case-insensitive search with thestartsWith
operator.