開始

---

立即下載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&gt;元素中初始化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>