數(shù)據(jù)綁定

---

立即下載Kendo UI for jQuery

AutoComplete允許您通過將小部件綁定到本地數(shù)據(jù)數(shù)組或遠程數(shù)據(jù)服務來提供建議。

當您將 AutoComplete 與 DataSource 組件結合使用時，可以將大量遠程數(shù)據(jù)過濾到服務器并最大限度地提高客戶端性能。

提示：當您配置AutoComplete的本地或遠程數(shù)據(jù)源時，啟用分頁功能和設置pageSize只有在將分頁與虛擬化一起使用時才有效。在所有其他情況下，不要啟用分頁功能或設置pageSize。

綁定到本地數(shù)據(jù)

本地定義的值對于小型且固定的建議集很有用。

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

• 將數(shù)組直接傳遞給構造函數(shù)。
• 將dataSource屬性設置為本地數(shù)組。

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

Copy code<input id="autoComplete" />

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

以下示例演示了如何使用屬性將 AutoComplete 綁定到本地數(shù)據(jù)數(shù)組dataSource。

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

綁定到遠程數(shù)據(jù)

當您為較大的數(shù)據(jù)集綁定建議時，遠程數(shù)據(jù)綁定非常有用，以便在顯示時按需加載項。要執(zhí)行遠程數(shù)據(jù)綁定，請使用Kendo UI DataSource，它是本地和遠程數(shù)據(jù)的抽象，您可以使用 DataSource 來提供來自各種數(shù)據(jù)服務（例如XML、JSON和JSONP ）的數(shù)據(jù)。

以下示例演示如何使用 oData 和 DataSource 組件將 AutoComplete 綁定到遠程數(shù)據(jù)服務。

$(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"
}
})
});
});

以下示例演示如何使用 DataSource 組件將 AutoComplete 綁定到 JSONP 服務。

Copy code$(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();
}
})
});