开始

---

立即下载Kendo UI for jQuery

本指南演示了如何启动和运行Kendo UI for jQuery自动补全功能。

完成本指南后，您将能够达到以下最终结果：

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
label: {
content: "Fruits",
floating: true
},
clearButton: false
});
</script>

预览：

1. 创建输入元素

首先，在页面上创建一个用于初始化组件的<input>元素。

<input id="autocomplete" />

2. 初始化自动补全

在这一步中，您将从<input>元素中初始化AutoComplete，在初始化时，AutoComplete用<span>标签包装<input>元素。

<input id="autocomplete" />

<script>
// Target the input element by using jQuery and then call the kendoAutoComplete() method.
$("#autocomplete").kendoAutoComplete({
// Add some basic configurations such as a clear button.
clearButton: false
});
</script>

3.指定数据源

在这里，您将为用于显示值列表的组件指定一个dataSource配置。

<input id="autocomplete" />

<script>
$("#autocomplete").kendoAutoComplete({
// Add an array of elements to the DataSource.
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name", //The field of the data item that provides the text content of the list items.
clearButton: false
});
</script>

4. 添加一些样式

AutoComplete提供了几个选项能够修改其外观，在本例中,您将应用一个扁平的fillMode配置组件。

<input id="autocomplete" />

<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
clearButton: false,
fillMode: "flat" // Apply a flat fillMode.
});
</script>

5. 配置标签

AutoComplete允许您使用它的label属性来配置它的标签。

<input id="autocomplete" />

<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
clearButton: false,
fillMode: "flat",
label: {
content: "Customers", // Specify the label content.
floating: true // Allow the label to float.
}
});
</script>