本節專門為大家介紹 Kendo UI AutoComplete 的12個方法。包括關閉、刪除、返回、啟用/禁用、聚焦、搜索等常規方法。

Methods

close

關閉彈出建議。

示例-關閉彈出建議

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

dataItem

在指定索引返回數據項。

參數

Returns

Object 指定索引的數據項。如果索引沒有在邊界內，返回undefined。

示例-獲取某些索引的item

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples", "Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
// Search for items starting with "A" - will open the suggestion popup and show "Apples"
autocomplete.search("A");
console.log(autocomplete.dataItem(0)); // Displays "Apples" in the browser console
</script>

destroy

用于安全刪除DOM。分離所有事件處理器并刪除 jQuery.data 屬性，從而避免內存泄露。

重要提示：這個方法不能刪除DOM中的組件元素。

示例

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

enable

啟用和禁用組件。

參數

示例-啟用組件

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

示例-禁用組件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.enable(false);
</script>

focus

示例-聚焦于組件

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

readonly

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

重要提示：

禁用和只讀模式是有區別的。禁用組件的值不會作為form的一部分，而只讀組件是form的一部分。

啟用和禁用組件。

參數

示例-設置為只讀模式

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

refresh

重新生成一遍items，刷新建議菜單

示例-刷新組件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.refresh();
</script>

search

搜索指定值的數據源并顯示相應的建議。

參數

示例-搜索組件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples", "Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.search("A"); // Displays "Apples" in the suggestion popup
</script>

select

選擇提供的項目作為一個參數，并更新組件的值。

參數

示例-選中項目

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "John", "Jane" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.search("J");
autocomplete.select(autocomplete.ul.children().eq(1)); // Selects the second suggestion which is "Jane"
</script>

setDataSource

設置組件的數據源。

參數

示例

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples", "Oranges" ]
});
var dataSource = new kendo.data.DataSource({
data: [ "Bananas", "Cherries" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.setDataSource(dataSource);
</script>

suggest

為指定的算法設置組件的值，并選中文本

設置組件的數據源。

參數

示例

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples", "Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.suggest("Apples");
</script>

value

獲取或設置組件的值

參數

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataSource: [ "Apples", "Oranges" ]
});
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.value("Apples");
var value = autocomplete.value();
console.log(value); // Displays "Apples"
</script>

慧都特邀Kendo UI原廠開發工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>