世俱杯 2025

本文是Kendo UI AutoComplete的再续篇，主要介绍模板、数据源字段、组件选项等API元素。

headerTemplate String|Function

指定一个静态的HTML内容，会生成弹出菜单的页头。

重要提示：

• 组件没有为这个页头模板传递模型数据，所以这个选项只适用于静态HTML。

示例-指定headerTemplate

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
headerTemplate: '<div><h2>Fruits</h2></div>'
});
</script>

template String|Function

这个template字符串用于生成建议，默认情况下组件只会显示建议的文本（可通过dataTextFiled进行配置）。

示例-将模板指定为一个函数

<input id="autocomplete" />
<script id="template" type="text/x-kendo-template">
<span>
<img src="/img/#: id #.png" alt="#: name #" />
#: name #
</span>
</script>
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: kendo.template($("#template").html())
});
</script>

示例-将模板指定为一个字符串

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
template: '<span><img src="/img/#: id #.png" alt="#: name #" />#: name #</span>'
});
</script>

valuePrimitive Boolean(default: false)

当初始化模块值为空时，为组件指定value binding操作。如果设置为true， View-Model字段会更新为选中的项目文本字段。如果设置为false，View-Model字段会更新为选中的项。

示例-指定View-Model字段会更新为选中的项目文本

<input id="autocomplete" data-bind="value: productName, source: products" />

<script>
$("#autocomplete").kendoAutoComplete({
valuePrimitive: true,
dataTextField: "name"
});
var viewModel = kendo.observable({
productName: null,
products: [
{ id: 1, name: "Coffee" },

{ id: 2, name: "Tea" },
    { id: 3, name: "Juice" }
  ]
});

kendo.bind($("#autocomplete"), viewModel);
</script>

Fields

dataSource kendo.data.DataSource

改变数据源会反应在组件上。

重要提示：

• 用这个选项无法分配新的数据源，请用setDataSource方法代替。

示例-添加数据项到数据源中

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
  dataSource: [
    { name: "Apples" },
    { name: "Oranges" }
  ],
  dataTextField: "name"
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.dataSource.read();
autocomplete.dataSource.add({ name: "Appricot" });
autocomplete.search("A");
</script>

options Object

这是一个对象，拥有组件所有的选项。

示例-获取组件的选项

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var element = autocomplete.element;

var options = autocomplete.options;
</script>

list jQuery

下拉列表元素的jQuery对象

示例-获取列表元素

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var list = autocomplete.list;
</script>

ul jQuery

ul元素的jQuery对象，拥有所有可用的选项。

示例-获取ul元素

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();

var autocomplete = $("#autocomplete").data("kendoAutoComplete");

var ul = autocomplete.ul;
</script>

慧都特邀Kendo UI原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>