All Components

Keyboard Navigation

By default, the keyboard navigation of the AutoComplete is enabled.

The AutoComplete supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Esc Closes the popup.
Enter Selects the highlighted item.
Down Arrow Highlights the previous item.
Up Arrow Highlights the next item.
@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"
     ];
}
In this article