模板

---

立即下載Kendo UI for jQuery

AutoComplete通過(guò)使用Kendo UI模板提供對(duì)項(xiàng)目、彈出式頁(yè)眉和彈出式頁(yè)腳的完全控制。

項(xiàng)目模板

項(xiàng)目模板管理自動(dòng)完成列表項(xiàng)目的呈現(xiàn)方式。

以下示例演示了如何定義項(xiàng)目模板。

<input id="autoComplete" />
<!-- Template -->
<script id="scriptTemplate" type="text/x-kendo-template">
ContactName: #:data.ContactName#, CustomerID: #:data.CustomerID#
</script>

<!-- AutoComplete initialization -->
<script>
$(document).ready(function() {
$("#autoComplete").kendoAutoComplete({
template: $("#scriptTemplate").html(),
dataTextField: "ContactName",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>

標(biāo)題模板

標(biāo)頭模板管理自動(dòng)完成的彈出標(biāo)頭的呈現(xiàn)方式。

<input id="autoComplete" />
<!-- Template -->
<script id="headerTemplate" type="text/x-kendo-template">
<strong>Header</strong>
</script>

<!-- AutoComplete initialization -->
<script>
$(document).ready(function() {
$("#autoComplete").kendoAutoComplete({
headerTemplate: $("#headerTemplate").html(),
dataTextField: "ContactName",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>

頁(yè)腳模板

頁(yè)腳模板管理自動(dòng)完成的彈出頁(yè)腳的呈現(xiàn)方式。每次數(shù)據(jù)源發(fā)生更改時(shí)，頁(yè)腳都會(huì)重新呈現(xiàn)。模板的上下文是小部件本身。

<input id="autoComplete" />
<!-- Template -->
<script id="footerTemplate" type="text/x-kendo-template">
Total <strong>#: instance.dataSource.total() #</strong> items found
</script>

<!-- AutoComplete initialization -->
<script>
$(document).ready(function() {
$("#autoComplete").kendoAutoComplete({
footerTemplate: $("#footerTemplate").html(),
dataTextField: "ContactName",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>

無(wú)數(shù)據(jù)模板

noDataTemplate當(dāng)數(shù)據(jù)源為空時(shí)，自動(dòng)完成將顯示在彈出窗口中。

注意：定義該noDataTemplate選項(xiàng)后，自動(dòng)完成功能始終會(huì)打開(kāi)其彈出元素。

<input id="autoComplete" />
<!-- Template -->
<script id="noDataTemplate" type="text/x-kendo-template">
<strong>No Data!</strong>
</script>

<!-- AutoComplete initialization -->
<script>
$(document).ready(function() {
$("#autoComplete").kendoAutoComplete({
noDataTemplate: $("#noDataTemplate").html(),
dataTextField: "ContactName",
dataSource: {
transport: {
read: {
dataType: "jsonp",
url: "https://demos.telerik.com/kendo-ui/service/Customers"
}
}
}
});
});
</script>