All Components

AutoComplete Overview

The AutoComplete is a form component that provides suggestions depending on the typed text.

It is a richer version of the <input> element and supports data binding, filtering, and templates.

Basic Usage

The following example demonstrates the AutoComplete in action.

@Component({
  selector: 'my-app',
  styles: ['.countries { width: 300px; }'],
  template: `
    <div class="example-wrapper">
        <p>Type the name of a European country:</p>
        <kendo-autocomplete
            [data]="listItems"
            [placeholder]="'e.g. Denmark'"
            class="countries"
        >
        </kendo-autocomplete>
    </div>
   `
})
class AppComponent {
    public listItems: Array<string> = [
     "Albania",
     "Andorra",
     "Armenia",
     "Austria",
     "Azerbaijan",
     "Belarus",
     "Belgium",
     "Bosnia & Herzegovina",
     "Bulgaria",
     "Croatia",
     "Cyprus",
     "Czech Republic",
     "Denmark",
     "Estonia",
     "Finland",
     "France",
     "Georgia",
     "Germany",
     "Greece",
     "Hungary",
     "Iceland",
     "Ireland",
     "Italy",
     "Kosovo",
     "Latvia",
     "Liechtenstein",
     "Lithuania",
     "Luxembourg",
     "Macedonia",
     "Malta",
     "Moldova",
     "Monaco",
     "Montenegro",
     "Netherlands",
     "Norway",
     "Poland",
     "Portugal",
     "Romania",
     "Russia",
     "San Marino",
     "Serbia",
     "Slovakia",
     "Slovenia",
     "Spain",
     "Sweden",
     "Switzerland",
     "Turkey",
     "Ukraine",
     "United Kingdom",
     "Vatican City"
     ];
}

Features

The AutoComplete delivers the following features:

Events

On Changing the Value

The valueChange event is triggered when the value is changed.

@Component({
  selector: 'my-app',
  template: `
    <div class="example-wrapper">
        <p>T-shirt size:</p>
        <kendo-autocomplete
            [data]="data"
            [valueField]="'text'"
            (valueChange)="handleValue($event)"
            [placeholder]="'e.g. Medium'"
        >
        </kendo-autocomplete>
    </div>

    <div class="example-config">
        <h4>Last 10 calls:</h4>
        <p *ngFor="let call of eventCalls">{{ call.name }}: <strong>{{ call.value | json }}</strong></p>
    </div>
  `
})
class AppComponent {
    public data: Array<{ text: string, value: number }> = [
        { text: "Small", value: 1 },
        { text: "Medium", value: 2 },
        { text: "Large", value: 3 }
    ];

    public eventCalls: Array<any> = [];

    last10Calls() {
        const end = this.eventCalls.length;

        return this.eventCalls.slice(Math.max(0, end - 10), end);
    }

    handleValue(value) {
        this.eventCalls = this.last10Calls().concat([ { name: 'change', value: value } ]);
    }
}

On Changing the Filter

The filterChange event fires if the filterable property is set to true and the user types inside the filter input. For more details, refer to the section on filtering.

On Closing and Opening the Suggestion List

The open and close events are triggered when the visibility state of the suggestion list is about to change. Both events are preventable.

To manually open or close the suggestion list, use the toggle method.

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

@Component({
  selector: 'my-app',
  template: `
    <div class="example-config">
        <p>Use the button to open and close the drop-down list.</p>     
        <button class="k-button" (click)="toggle()">
            <span *ngIf="opened">Close AutoComplete</span>
            <span *ngIf="!opened">Open AutoComplete</span>
        </button>
    </div>
    <div class="row">
        <div class="col-xs-12 example-col">
            <p>AutoComplete with prevented open and close.</p>
            <kendo-autocomplete
                #autocomplete
                [data]="listItems"
                (open)="onOpen($event)"
                (close)="onClose($event)"
            >
            </kendo-autocomplete>
        </div>
    </div>
  `
})
class AppComponent {
    @ViewChild('autocomplete') public autocomplete: AutoCompleteComponent;

    public opened: boolean = false;

    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];

    public onOpen(event: PreventableEvent) {
        event.preventDefault(); /* prevent opening */
    }

    public onClose(event: PreventableEvent) {
        event.preventDefault(); /* prevent closing */
    }

    public toggle() {
        this.autocomplete.toggle();
        this.opened = this.autocomplete.isOpen;
    }
}
In this article