All Components

Keyboard Navigation

The keyboard support of the AutoComplete is always available.

To apply the keyboard shortcuts, focus the AutoComplete by clicking the example area and pressing the Tab key.

The AutoComplete and its drop-down elements support the following keyboard shortcuts:

SHORTCUT DESCRIPTION
 Up Arrow  Highlights the previous item.
 Down Arrow
  • Highlights the next item.
  • Opens the popup if the value is set.
 Page Up  Scrolls the popup up.
 Page Down  Scrolls the popup down.
 Enter  Selects the highlighted item.
 Esc 
  • Closes the popup.
  • Clears the value if the popup is not opened.
<div id="vueapp" class="vue-app">
    <kendo-autocomplete :data-source="dataSourceArray"
                        :placeholder="'Select country...'"
                        :separator="', '"
                        :filter="'startswith'">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                'Albania',
                'Andorra',
                'Armenia',
                'Austria',
                'Azerbaijan',
                'Belarus',
                'Belgium',
                'Bosnia & Herzegovina',
                'Bulgaria',
                'Croatia',
                'Cyprus',
                'Czech Republic',
                'Denmark',
                'Estonia',
                'Finland',
                'France',
                'Georgia',
                'Germany',
                'Greece'
            ]
        }
    }
})
In this article