All Components

Filtering

To enable the filtering functionality, set the filterable property to true.

Basic Configuration

On every user modification of the input value, the ComboBox triggers a filterChange event. 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-combobox
            [data]="data"
            [textField]="'text'"
            [valueField]="'value'"
            [filterable]="true"
            (filterChange)="handleFilter($event)"
            [placeholder]="'T-shirt size'"
        >
        </kendo-combobox>
    </div>
  `
})
class AppComponent {
    public source: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

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

    handleFilter(value) {
        this.data = this.source.filter((s) => s.text.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-combobox
        #list
        [data]="data"
        [filterable]="true"
        [textField]="'text'"
        [valueField]="'value'"
    >
    </kendo-combobox>
  `
})
export class AppComponent {
    @ViewChild("list") list;

    public source: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

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

    ngAfterViewInit() {
      const contains = value => s => s.text.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 drop-down list of the ComboBox only after typing a minimum number of characters.

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

@Component({
  selector: 'my-app',
  template: `
    <p>Focus the ComboBox and type minimum 3 characters, e.g. "sma"</p>
    <kendo-combobox
        #combo
        [data]="data"
        [textField]="'text'"
        [valueField]="'value'"
        [filterable]="true"
        (filterChange)="handleFilter($event)"
    >
    </kendo-combobox>
  `
})
class AppComponent {
    @ViewChild('combo') public combo: ComboBoxComponent;

    public source: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public data: Array<{ text: string, value: number }>;

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

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