數據綁定

---

立即下載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: "http://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();
}
})
});