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

---

立即下載Kendo UI for jQuery

AutoComplete允許您通過(guò)將小部件綁定到本地?cái)?shù)據(jù)數(shù)組或遠(yuǎn)程數(shù)據(jù)服務(wù)來(lái)提供建議。

當(dāng)您將 AutoComplete 與 DataSource 組件結(jié)合使用時(shí)，可以將大量遠(yuǎn)程數(shù)據(jù)過(guò)濾到服務(wù)器并最大限度地提高客戶端性能。

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

綁定到本地?cái)?shù)據(jù)

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

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

• 將數(shù)組直接傳遞給構(gòu)造函數(shù)。
• 將dataSource屬性設(shè)置為本地?cái)?shù)組。

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

Copy code<input id="autoComplete" />

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

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

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

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

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

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

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

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

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