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