Components / Dropdowns / AutoComplete

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

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);

In this article