本節為大家介紹kendo.ui.ComboBox，分為上下兩篇，上篇先介紹ComboBox的Configuration。

Configuration

animation Object

設置建議彈出窗口的打開和關閉動畫。將animation選項設置為false時，會禁用打開和關閉動畫。

示例-禁用打開和關閉動畫

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: false
});
</script>

示例-設置動畫

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "fadeOut zoom:out",
duration: 300
},
open: {
effects: "fadeIn zoom:in",
duration: 300
}
}
});
</script>

animation.close Object

示例-設置關閉動畫

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
close: {
effects: "zoom:out",
duration: 300
}
}
});
</script>

animation.close.effects String

顯示關閉動畫時的效果，多個效果之間應該由空格隔開。

animation.close.duration Number (default: 100)

關閉動畫的持續時間以毫秒計算。

animation.open Object

建議窗口打開時的動畫

示例-設置打開動畫

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
animation: {
open: {
effects: "zoom:in",
duration: 300
}
}
});
</script>

animation.open.effects String

顯示打開動畫時的效果。多個效果之間由空格隔開。

animation.open.duration Number (default: 200)

打開動畫的持續時間以毫秒計算

autoBind Boolean(default: true)

控制是否在初始化極端綁定組件給數據源

示例

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
autoBind: false
});
</script>

cascadeFrom String

使用這個字符創去設置父ComboBox組件的ID

示例

<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
dataTextField: "parentName",
dataValueField: "parentId",
dataSource: [
{ parentName: "Parent1", parentId: 1 },
{ parentName: "Parent2", parentId: 2 }
]
});

$("#child").kendoComboBox({
cascadeFrom: "parent",
dataTextField: "childName",
dataValueField: "childId",
dataSource: [
{ childName: "Child1", childId: 1, parentId: 1 },
{ childName: "Child2", childId: 2, parentId: 2 },
{ childName: "Child3", childId: 3, parentId: 1 },
{ childName: "Child4", childId: 4, parentId: 2 }
]
});
</script>

cascadeFromField String

自定義篩選數據源的字段，如果沒有定義，父節點的dataValueField選項會被使用。

示例

<input id="parent" />
<input id="child" />
<script>
$("#parent").kendoComboBox({
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Parent1", id: 1 },
{ name: "Parent2", id: 2 }
]
});

$("#child").kendoComboBox({
cascadeFrom: "parent",
cascadeFromField: "parentId",
dataTextField: "name",
dataValueField: "id",
dataSource: [
{ name: "Child1", id: 1, parentId: 1 },
{ name: "Child2", id: 2, parentId: 2 },
{ name: "Child3", id: 3, parentId: 1 },
{ name: "Child4", id: 4, parentId: 2 }
]
});
</script>

dataSource Object|Array|kendo.data.DataSource

組件的數據源用于顯示一串值。它可以是一個JavaScript對象，代表著一個有效的數據源配置、一個JavaScript數組或一個當前kendo.data.DataSource實體。

如果數據源選項設置為一個JavaScript對象或數組，組件會初始化一個新的kendo.data.DataSource實體。

如果數據源選項時當前的某個kendo.data.DataSource實體，組件會使用這個實體且不會再初始化。

示例-設置dataSource作為一個JavaScript對象

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: {
data: ["One", "Two"]
}
});
</script>

示例 - 設置dataSource作為JavaScript數組

<input id="combobox" />
<script>
var data = ["One", "Two"];
$("#combobox").kendoComboBox({
dataSource: data
});
</script>

示例- 設置dataSource作為當前的kendo.data.DataSource實體

<input id="combobox" />
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/products",
dataType: "jsonp"
}
}
});
$("#combobox").kendoComboBox({
dataSource: dataSource,
dataTextField: "ProductName",
dataValueField: "ProductID"
});
</script>

dataTextField String(default: "")

提供列表項文本內容的字段。組件會根據字段判斷數據源。

重要提示：當定義dataTextField 后，thedataValueField 選項也必須設置。

示例 - 設置dataTextField

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
],
dataTextField: "Name",
dataValueField: "Id"
});
</script>

dataValueField String(default: "")

提供組件值的字段。

重要提示：當dataValueField定義后，thedataTextField選項也必須設置。

示例 - 設置dataValueField

<input id="combobox" />
<script>
$("#comboBox").kendoComboBox({
dataSource: [{
{ Name: "Parent1", Id: 1 },
{ Name: "Parent2", Id: 2 }
}]
dataTextField: "Name",
dataValueField: "Id"
});
</script>

delay Number(default: 200)

敲下鍵盤后彈出菜單顯示出來之間的延遲。

示例-設置延遲

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
delay: 500
});
</script>

enable Boolean(default: true)

如果設置為false，組件會被禁用，不允許用戶輸入。組件默認情況下是啟用的，運行用戶輸入。

示例-禁用組件

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
enable: false
});
</script>

filter String(default: "none")

這個過濾方法決定建議的當前值。

示例 - 設置過濾

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
filter: "contains"
});
</script>

height Number(default: 200)

建議窗口的高度單位是像素，默認是200px。

示例-設置高度

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
height: 500
});
</script>

highlightFirst Boolean(default: true)

如果設置為true，第一個建議會自動高亮顯示。

示例 -設置highlightFirst

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
highlightFirst: false
});
</script>

ignoreCase String(default: true)

如果設置為false，搜索時會區分字母大小寫。組件默認情況下會執行區分大小寫。

示例-禁用區分字母大小寫

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
ignoreCase: false
});
</script>

index Number(default: -1)

最初選中項的索引，索引是基于0的。

示例-選擇第二個項

<input id="combobox" />
<script>
var items = [{ text: "Item 1", value: "1" }, { text: "Item 2", value: "2" }];
$("#combobox").kendoComboBox({
dataTextField: "text",
dataValueField: "value",
dataSource: items,
index: 1
});
</script>

minLength Number(default: 1)

搜索時用戶必須輸入的最小字符數。如果搜索能匹配的項目很多，將值設置為大于1的數。

示例-設置最小長度

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
minLength: 3
});
</script>

placeholder String(default: "")

當占位符為空時組件會顯示提示，默認情況下沒有設置。

示例-指定占位符選項

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
placeholder: "Select..."
});
</script>

示例-指定占位符作為HTML屬性

<input id="combobox" placeholder="Select..." />

<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"]
});
</script>

suggest Boolean(default: false)

如果設置為true，組件會自動適應第一個建議。

示例-啟用自動建議

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
suggest: true
});
</script>

headerTemplate String|Function

指定一個靜態HTML內容，作為彈出元素的頭部。

重要提示：組件不會傳遞一個模塊數據給header模板，這個選項只能用靜態HTML。

示例 - 指定headerTemplate字符串

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

template String|Function

用于渲染項目的模板。默認情況下組件只顯示數據項的文本（通過dataTextField配置）。

示例-設定一個函數作為模板

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

示例-設定一個字符串作為模板

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

text String(default: "")

當autoBind設置為false時，會運用的組件文本。

示例-指定組件文本

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
autoBind: false,
text: "Chai"
});
</script>

value String(default: "")

組件的值。

示例-設定組件的值

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: ["Item1", "Item2"],
value: "Item1"
});
</script>

valuePrimitive Boolean(default: false)

當初始化模塊值為空時，設定綁定操作的值。如果設置為true，View-Model字段會更新為選中的項目字段值。如果設置為false，View-Model字段會更新為選中的項目。

示例-設定View-Model字段更新為選中的項目值

<input id="combobox" data-bind="value: selectedProductId, source: products" />

<script>
$("#combobox").kendoComboBox({
valuePrimitive: true,
dataTextField: "name",
dataValueField: "id"
});
var viewModel = kendo.observable({
selectedProductId: null,
products: [
{ id: 1, name: "Coffee" },
{ id: 2, name: "Tea" },
{ id: 3, name: "Juice" }
]
});

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