模板

---

立即下载Kendo UI for jQuery

AutoComplete通过使用Kendo UI模板提供对项目、弹出式页眉和弹出式页脚的完全控制。

项目模板

项目模板管理自动完成列表项目的呈现方式。

以下示例演示了如何定义项目模板。

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

标题模板

标头模板管理自动完成的弹出标头的呈现方式。

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

页脚模板

页脚模板管理自动完成的弹出页脚的呈现方式。每次数据源发生更改时，页脚都会重新呈现。模板的上下文是小部件本身。

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

无数据模板

noDataTemplate当数据源为空时，自动完成将显示在弹出窗口中。

注意：定义该noDataTemplate选项后，自动完成功能始终会打开其弹出元素。

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