開(kāi)始

---

立即下載Kendo UI for jQuery

本指南演示了如何啟動(dòng)和運(yùn)行Kendo UI for jQuery自動(dòng)補(bǔ)全功能。

完成本指南后，您將能夠達(dá)到以下最終結(jié)果：

<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>

預(yù)覽：

1. 創(chuàng)建輸入元素

首先，在頁(yè)面上創(chuàng)建一個(gè)用于初始化組件的<input>元素。

<input id="autocomplete" />

2. 初始化自動(dòng)補(bǔ)全

在這一步中，您將從<input>元素中初始化AutoComplete，在初始化時(shí)，AutoComplete用<span>標(biāo)簽包裝<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.指定數(shù)據(jù)源

在這里，您將為用于顯示值列表的組件指定一個(gè)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提供了幾個(gè)選項(xiàng)能夠修改其外觀，在本例中,您將應(yīng)用一個(gè)扁平的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. 配置標(biāo)簽

AutoComplete允許您使用它的label屬性來(lái)配置它的標(biāo)簽。

<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>