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

Configuration

animation Object

設(shè)置建議彈出窗口的打開和關(guān)閉動畫。將animation選項(xiàng)設(shè)置為false時，會禁用打開和關(guān)閉動畫。

示例-禁用打開和關(guān)閉動畫

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

示例-設(shè)置動畫

<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

示例-設(shè)置關(guān)閉動畫

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

animation.close.effects String

顯示關(guān)閉動畫時的效果，多個效果之間應(yīng)該由空格隔開。

animation.close.duration Number (default: 100)

關(guān)閉動畫的持續(xù)時間以毫秒計算。

animation.open Object

建議窗口打開時的動畫

示例-設(shè)置打開動畫

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

animation.open.effects String

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

animation.open.duration Number (default: 200)

打開動畫的持續(xù)時間以毫秒計算

autoBind Boolean(default: true)

控制是否在初始化極端綁定組件給數(shù)據(jù)源

示例

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

cascadeFrom String

使用這個字符創(chuàng)去設(shè)置父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

自定義篩選數(shù)據(jù)源的字段，如果沒有定義，父節(jié)點(diǎn)的dataValueField選項(xiàng)會被使用。

示例

<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

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

如果數(shù)據(jù)源選項(xiàng)設(shè)置為一個JavaScript對象或數(shù)組，組件會初始化一個新的kendo.data.DataSource實(shí)體。

如果數(shù)據(jù)源選項(xiàng)時當(dāng)前的某個kendo.data.DataSource實(shí)體，組件會使用這個實(shí)體且不會再初始化。

示例-設(shè)置dataSource作為一個JavaScript對象

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

示例 - 設(shè)置dataSource作為JavaScript數(shù)組

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

示例- 設(shè)置dataSource作為當(dāng)前的kendo.data.DataSource實(shí)體

<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: "")

提供列表項(xiàng)文本內(nèi)容的字段。組件會根據(jù)字段判斷數(shù)據(jù)源。

重要提示：當(dāng)定義dataTextField 后，thedataValueField 選項(xiàng)也必須設(shè)置。

示例 - 設(shè)置dataTextField

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

dataValueField String(default: "")

提供組件值的字段。

重要提示：當(dāng)dataValueField定義后，thedataTextField選項(xiàng)也必須設(shè)置。

示例 - 設(shè)置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)

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

示例-設(shè)置延遲

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

enable Boolean(default: true)

如果設(shè)置為false，組件會被禁用，不允許用戶輸入。組件默認(rèn)情況下是啟用的，運(yùn)行用戶輸入。

示例-禁用組件

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

filter String(default: "none")

這個過濾方法決定建議的當(dāng)前值。

示例 - 設(shè)置過濾

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

height Number(default: 200)

建議窗口的高度單位是像素，默認(rèn)是200px。

示例-設(shè)置高度

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

highlightFirst Boolean(default: true)

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

示例 -設(shè)置highlightFirst

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

ignoreCase String(default: true)

如果設(shè)置為false，搜索時會區(qū)分字母大小寫。組件默認(rèn)情況下會執(zhí)行區(qū)分大小寫。

示例-禁用區(qū)分字母大小寫

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

index Number(default: -1)

最初選中項(xiàng)的索引，索引是基于0的。

示例-選擇第二個項(xiàng)

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

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

示例-設(shè)置最小長度

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

placeholder String(default: "")

當(dāng)占位符為空時組件會顯示提示，默認(rèn)情況下沒有設(shè)置。

示例-指定占位符選項(xiàng)

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

如果設(shè)置為true，組件會自動適應(yīng)第一個建議。

示例-啟用自動建議

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

headerTemplate String|Function

指定一個靜態(tài)HTML內(nèi)容，作為彈出元素的頭部。

重要提示：組件不會傳遞一個模塊數(shù)據(jù)給header模板，這個選項(xiàng)只能用靜態(tài)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

用于渲染項(xiàng)目的模板。默認(rèn)情況下組件只顯示數(shù)據(jù)項(xiàng)的文本（通過dataTextField配置）。

示例-設(shè)定一個函數(shù)作為模板

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

示例-設(shè)定一個字符串作為模板

<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: "")

當(dāng)autoBind設(shè)置為false時，會運(yùn)用的組件文本。

示例-指定組件文本

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

value String(default: "")

組件的值。

示例-設(shè)定組件的值

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

valuePrimitive Boolean(default: false)

當(dāng)初始化模塊值為空時，設(shè)定綁定操作的值。如果設(shè)置為true，View-Model字段會更新為選中的項(xiàng)目字段值。如果設(shè)置為false，View-Model字段會更新為選中的項(xiàng)目。

示例-設(shè)定View-Model字段更新為選中的項(xiàng)目值

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