All Components

AutoComplete Overview

The AutoComplete provides suggestions depending on the typed text.

It is a richer version of the <input> element and provides suggestions depending on the typed text.

The AutoComplete wrapper for Vue is a client-side wrapper for the Kendo UI AutoComplete widget.

Basic Usage

The following example demonstrates the AutoComplete in action.

<div id="vueapp" class="vue-app">
    <kendo-autocomplete v-model="autocompleteValue"
                        :data-source="dataSourceArray"
                        :placeholder="'Select country...'"
                        :separator="', '"
                        :filter="'contains'">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            autocompleteValue: "",
            dataSourceArray: [
                '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 and Functionalities

Events

The following example demonstrates basic AutoComplete events. You can subscribe to all AutoComplete events by the handler name.

<div id="vueapp" class="vue-app">
    <kendo-autocomplete :data-source="dataSourceArray"
                        :filter="'contains'"
                        :placeholder="'Choose a sport...'"
                        @change="onChange"
                        @close="onClose"
                        @dataBound="onDataBound"
                        @filtering="onFiltering"
                        @open="onOpen"
                        @select="onSelect">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                'Football',
                'Tennis',
                'Basketball',
                'Baseball',
                'Cricket',
                'Field Hockey',
                'Volleyball'
            ]
        }
    },
    methods: {
        onChange: function(e) {
            console.log("Event :: change");
        },
        onClose: function(e) {
            console.log("Event :: close");
        },
        onDataBound: function(e) {
            console.log("Event :: dataBound");
        },
        onFiltering: function(e) {
            console.log("Event :: filtering");
        },
        onOpen: function(e) {
            console.log("Event :: open");
        },
        onSelect: function(e) {
            console.log("Event :: select");
        }
    }
})
In this article