All Components

Filtering

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.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <kendo-autocomplete
            [data]="data"
            [filterable]="true"
            (filterChange)="handleFilter($event)"
            [placeholder]="'e.g. Andorra'"
        >
        </kendo-autocomplete>
    </div>
  `
})
class AppComponent {
    public source: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

    public data: Array<string>;

    constructor() {
        this.data = this.source.slice();
    }

    handleFilter(value) {
        this.data = this.source.filter((s) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1);
    }
}

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.

import { Component, ViewChild } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs/Rx';

@Component({
  selector: 'my-app',
  template: `
    <kendo-autocomplete
        #list
        [data]="data"
        [filterable]="true"
    >
    </kendo-autocomplete>
  `
})
export class AppComponent {
    @ViewChild("list") list;

    public source: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

    public data: Array<string> = [];



    ngAfterViewInit() {
      const contains = value => s => s.toLowerCase().indexOf(value.toLowerCase()) !== -1;

      this.list.filterChange.asObservable().switchMap(value => Observable.from([this.source])
        .do(() => this.list.loading = true)
        .delay(1000)
        .map((data) =>  data.filter(contains(value))))
        .subscribe(x => {
            this.data = x;
            this.list.loading = false;
        });
    }

}

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.

import { Component, ViewChild } from '@angular/core';
import { AutoCompleteComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  selector: 'my-app',
  template: `
    <p>Focus the AutoComplete and type minimum 3 characters, e.g. "arm"</p>
    <kendo-autocomplete
        #autocomplete
        [data]="data"
        [filterable]="true"
        (filterChange)="handleFilter($event)"
        [placeholder]="'e.g. Andorra'"
    >
    </kendo-autocomplete>
  `
})
class AppComponent {
    @ViewChild('autocomplete') public autocomplete: AutoCompleteComponent;

    public source: Array<string> = ["Albania", "Andorra", "Armenia", "Austria", "Azerbaijan"];

    public data: Array<string>;

    constructor() {
        this.data = this.source.slice();
    }

    handleFilter(value) {
        if (value.length >= 3) {
            this.data = this.source.filter((s) => s.toLowerCase().indexOf(value.toLowerCase()) !== -1);
        } else {
            this.autocomplete.toggle(false);
        }
    }
}
In this article