本节专门为大家介绍 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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>查看详情