Data Binding
The AutoComplete enables you to provide its suggestions by binding the widget to local data arrays or to remote data services.
When you use the AutoComplete with the DataSource component, you can perform the filtering of large remote data to the server and maximize the client-side performance.
When you configure the local or remote data source of the AutoComplete, enabling paging functionality and setting
pageSizeis efficient only when you use paging together with virtualization. In all other cases, do not enable the paging functionality or set thepageSize.
Binding to Local Data
Locally defined values are useful for small and fixed sets of suggestions.
To provide the AutoComplete suggestions locally, use either of the following approaches:
- Pass an array directly to the constructor.
- Set the
dataSourceproperty to a local array.
The following example demonstrates how to directly initialize a local data array in the constructor.
<input id="autoComplete" />
<script>
$("#autoComplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);
</script>
The following example demonstrates how to bind the AutoComplete to a local data array by using the dataSource property.
<input id="autoComplete" />
<script>
var data = ["Item1", "Item2", "Item3"];
$("#autoComplete").kendoAutoComplete({
dataSource: data
});
</script>
Binding to Remote Data
Remote data binding is useful when you bind suggestions for larger datasets so that the items are loaded on demand upon display. To perform remote data binding, use the Kendo UI DataSource which is an abstraction for local and remote data. You can use the DataSource for serving data from various data services such as XML, JSON, and JSONP.
The following example demonstrates how to bind the AutoComplete to a remote data service by using oData and the DataSource component.
$(document).ready(function(){
$("#autoComplete").kendoAutoComplete({
minLength: 3,
dataTextField: "ContactName", // JSON property name to use
dataSource: new kendo.data.DataSource({
type: "odata", // specifies data protocol
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
})
});
});
The following example demonstrates how to bind the AutoComplete to a JSONP service by using the DataSource component.
$(document).ready(function(){
$("#autoComplete").kendoAutoComplete({
minLength:6,
dataTextField:"title",
filter: "contains",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "http://api.geonames.org/wikipediaSearchJSON",
data: {
q: function(){
return $("#autoComplete").data("kendoAutoComplete").value();
},
maxRows: 10,
username: "demo"
}
}
},
schema: {
data:"geonames"
}
}),
change: function(){
this.dataSource.read();
}
})
});