数据绑定

---

立即下载Kendo UI for jQuery

AutoComplete允许您通过将小部件绑定到本地数据数组或远程数据服务来提供建议。

当您将 AutoComplete 与 DataSource 组件结合使用时，可以将大量远程数据过滤到服务器并最大限度地提高客户端性能。

提示：当您配置AutoComplete的本地或远程数据源时，启用分页功能和设置只有在将分页与虚拟化一起使用时才有效。在所有其他情况下，不要启用分页功能或设置pageSize。

绑定到本地数据

本地定义的值对于小型且固定的建议集很有用。

要在本地提供AutoComplement建议，请使用以下方法之一：

• 将数组直接传递给构造函数。
• 将dataSource属性设置为本地数组。

以下示例演示了如何直接初始化constructor。

Copy code<input id="autoComplete" />

<script>
$("#autoComplete").kendoAutoComplete(["Item1", "Item2", "Item3"]);
</script>

以下示例演示了如何使用属性将 AutoComplete 绑定到本地数据数组dataSource。

<input id="autoComplete" />
<script>
var data = ["Item1", "Item2", "Item3"];
$("#autoComplete").kendoAutoComplete({
dataSource: data
});
</script>

绑定到远程数据

当您为较大的数据集绑定建议时，远程数据绑定非常有用，以便在显示时按需加载项。要执行远程数据绑定，请使用Kendo UI DataSource，它是本地和远程数据的抽象，您可以使用 DataSource 来提供来自各种数据服务（例如、和 ）的数据。

以下示例演示如何使用 oData 和 DataSource 组件将 AutoComplete 绑定到远程数据服务。

$(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: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
}
})
});
});

以下示例演示如何使用 DataSource 组件将 AutoComplete 绑定到 JSONP 服务。

Copy code$(document).ready(function(){
$("#autoComplete").kendoAutoComplete({
minLength:6,
dataTextField:"title",
filter: "contains",
dataSource: new kendo.data.DataSource({
transport: {
read: {
url: "//api.geonames.org/wikipediaSearchJSON",
data: {
q: function(){
return $("#autoComplete").data("kendoAutoComplete").value();
},
maxRows: 10,
username: "demo"
}
}
},
schema: {
data:"geonames"
}
}),
change: function(){
this.dataSource.read();
}
})
});