Filtering
The AutoComplete 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.
Basic Configuration
On every character input, the component triggers a filterChange event. If the filterable property is not set to true, the built-in search functionality of the component takes its place. Every keystroke then invokes a search and the first item in the list that matches the input gets focused. As a result, you can easily find items without implementing custom filtering. 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 list of the AutoComplete 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
DropDownFilterSettingsconfiguration object. By default, thekendoDropDownFilterdirective performs a case-insensitive search with thestartsWithoperator.