Getting Started with Kendo UI for Angular AutoComplete
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"
];
}
Functionality and Features
- Data binding
- Value binding
- Filtering
- Grouping
- Virtualization
- Disabled items
- Suggestions
- Templates
- Forms support
- Globalization
- Keyboard navigation
- Accessibility
Events
The following example demonstrates basic AutoComplete events.
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: `
<kendo-autocomplete [data]="data"
[filterable]="true"
(valueChange)="valueChange($event)"
(filterChange)="filterChange($event)"
(open)="open()"
(close)="close()"
(focus)="focus()"
(blur)="blur()"
>
</kendo-autocomplete>
<event-log title="Event log" [events]="events">
</event-log>
`
})
export class AppComponent {
public events: string[] = [];
public source: Array<string> = ['Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan'];
public data: Array<string>;
constructor() {
this.data = this.source.slice();
}
public valueChange(value: any): void {
this.log('valueChange', value);
}
public filterChange(filter: any): void {
this.log('filterChange', filter);
this.data = this.source.filter((s) => s.toLowerCase().indexOf(filter.toLowerCase()) !== -1);
}
public open(): void {
this.log('open');
}
public close(): void {
this.log('close');
}
public focus(): void {
this.log('focus');
}
public blur(): void {
this.log('blur');
}
private log(event: string, arg: any): void {
this.events.push(`${event} ${arg || ''}`);
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
DropDownsModule
],
declarations: [
AppComponent,
EventLogComponent
],
bootstrap: [
AppComponent
]
})
export class AppModule { }
import { Component, Input } from '@angular/core';
@Component({
selector: 'event-log',
template: `
<div class="example-config">
<h5>{{ title }}</h5>
<ul class="event-log">
<li *ngFor="let event of events.reverse()">{{ event }}</li>
</ul>
</div>
`
})
export class EventLogComponent {
@Input() title: string;
@Input() events: string[];
}
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);