All Components

Data Binding

The AutoComplete enables you to bind it to a list of possible values.

To provide suggestions, bind the AutoComplete to either:

Locally defined values are best for small, fixed sets of suggestions. For larger datasets, use remote suggestions.

Binding to Local Data Arrays

The AutoComplete enables you to bind to a list of possible values.

To configure and provide the AutoComplete suggestions locally, bind it to a local data array by using the Kendo UI Data Source component.

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

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            autocompleteValue: "",
            dataSourceArray: [
                'Albania',
                'Andorra',
                'Armenia',
                'Austria',
                'Azerbaijan',
                'Belarus',
                'Belgium'
            ]
        }
    }
})

Binding to Remote Data Services

To initialize the AutoComplete by binding it to a remote data service, use the Data Source component. Remote data binding is appropriate for larger datasets, so that items are loaded on demand when displayed. You can use the DataSource for serving data from a variety of data services such as XML, JSON, and JSONP.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :page-size="80">
    </kendo-datasource>
    <kendo-autocomplete :data-source-ref="'datasource'"
                        :data-text-field="'ShipName'"
                        :placeholder="'Choose a ship...'">
    </kendo-autocomplete>
</div>
Vue.use(DropdownsInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})
In this article