上篇跟大家介紹了kendo.ui.ComboBox的ComboBox的Configuration。接下來介紹它的Fields和Method的上半部分。

Fields

dataSource kendo.data.DataSource

組件的數據源。通過dataSource選項進行配置。

數據源發生的變化會顯示在組件上.

重要提示：部署新的數據源不會有任何影響，可以使用setDataSource方法代替。

示例-添加一個數據項到數據源中

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [
{ name: "Apples" },
{ name: "Oranges" }
],
dataTextField: "name",
dataValueField: "name"
});
var combobox = $("#combobox").data("kendoComboBox");
combobox.dataSource.add({ name: "Appricot" });
combobox.search("A");
</script>

input jQuery

用戶輸入的jQuery對象。

示例-獲取輸入元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var input = combobox.input;
<script>

options Object

保存了組件的所有選項。

示例-獲取組件的選項

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var options = combobox.options;
<script>

list jQuery

下拉列表項的jQuery對象。

示例-獲取列表元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var list = combobox.list;
<script>

ul jQuery

ul元素的jQuery對象，用于處理可用的選項。

示例-獲取ul元素

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();

var combobox = $("#combobox").data("kendoComboBox");

var ul = combobox.ul;
<script>

Methods

close

關閉組件的彈出菜單。

示例-關閉建議彈出菜單

<input id="combobox" />
<script>
$("#combobox").kendoComboBox({
dataSource: [ "Apples", "Oranges" ]
});
var combobox = $("#combobox").data("kendoComboBox");
// Search for items starting with "A" - will open the suggestion popup and show "Apples"
combobox.search("A");
// Close the suggestion popup
combobox.close();
</script>

dataItem

返回指定索引的數據項。如果未指定索引，如果沒有指定索引,將使用選中的索引。

Parameters

index Number (optional)

數據記錄從0開始的索引。

Returns

Object 原始數據記錄。如果沒有數據返回undefined。

示例

<input id="combobox" />
<script>

$("#combobox").kendoComboBox({
dataSource: [
{ id: 1, name: "Apples" },
{ id: 2, name: "Oranges" }
],
dataTextField: "name",
dataValueField: "id",
index: 1
});

var combobox = $("#combobox").data("kendoComboBox");

// get the dataItem corresponding to the selectedIndex.
var dataItem = combobox.dataItem();

// get the dataItem corresponding to the passed index.
var dataItem = combobox.dataItem(0);
</script>

destroy

分離所有事件處理器并刪除jQuery.data屬性，以避免內存泄露。

重要提示：這個方法不會刪除DOM中的ComboBox元素。

示例

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.destroy();
</script>

enable

啟用或禁用組件。

Parameters

enable Boolean

如果設置為true，組件會被啟用，反正則被禁用。

示例-啟用組件

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

readonly

切換組件的只讀狀態。當組件為只讀狀態時不允許用戶輸入。

注意：只讀模式和禁用之間有一個區別。禁用組件的值不會作為菜單的一部分，而只讀會作為菜單的一部分值。

Parameters

readonly Boolean

如果設置為true，組件不允許用戶輸入。如果設置為false，組件允許用戶輸入。

示例-設置組件為只讀模式

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.readonly(true);
</script>

focus

聚焦組件

示例-

<input id="combobox" />
<script>
$("#combobox").kendoComboBox();
var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>

open

打開彈出菜單。

示例-

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

var combobox = $("#combobox").data("kendoComboBox");
combobox.focus();
</script>

refresh

通過重新渲染所有的項目刷新彈出菜單。

示例-刷新項目

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

var combobox = $("#combobox").data("kendoComboBox");

combobox.refresh();
</script>

search

根據提供的值搜索數據源并顯示匹配的建議。

Parameters

word String

過濾值。

示例-搜索組件

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

var combobox = $("#combobox").data("kendoComboBox");

combobox.search("App");
</script>

下載Kendo UI最新試用版