Search code examples
kendo-ui-angular2

Limit autocomplete binding after specific number of character been typed


With the jQuery autocomplete, there are properties I can set to only initiate populating the list when a specific number of characters are typed by the user. This helps to reduce the number of items in the list, when ServerFiltering is enabled.

https://docs.telerik.com/aspnet-mvc/helpers/autocomplete/overview

eg.

                       .Filter("startswith")
                        .MinLength(3)

However, I don't see anything similar in the Angular component, unless I'm missing something. There is the filterchange event https://www.telerik.com/kendo-angular-ui/components/dropdowns/autocomplete/filtering/

This assumes that the list has already been populated and data binding has occurred, so that the list can be filtered.

How can I only bind the list when some minimum number of characters has been typed, as in the case with the jQuery widget using ServerBinding?


Solution

  • You can initially data-bind the AutoComplete to an empty array or a collection of preset initial data items, and call the data service to obtain data from the server only after the user has typed a certain number of characters, e.g.:

    DOCS

    Modified example