kendo ui资源合集
当前位置: 首页 > 使用教程

Kendo UI API中文介绍二:AutoComplete (4)

发布时间:2018-01-29

本节专门为大家介绍 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

在指定索引返回数据项。

参数

index Number(optional) 数据项索引从0开始

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

启用和禁用组件。

参数

enable Boolean 如果设置为true,组件就会启用;反之则被禁用。

示例-启用组件

<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的一部分。

启用和禁用组件。

参数

readonly Boolean 设置为true时,不允许用户输入;设置为false,允许用户输入

示例-设置为只读模式

<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

搜索指定值的数据源并显示相应的建议。

参数

word String 搜索的值,所有匹配的值都会显示在建议菜单中。

示例-搜索组件

<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

选择提供的项目作为一个参数,并更新组件的值。

参数

item String|Element|jQuery 选中的是字符串或者DOM元素或者jQuery对象,一个字符串被视作一个jQuery选择器

示例-选中项目

<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

设置组件的数据源。

参数

dataSource kendo.data.DataSource 组件要绑定的数据源

示例

<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

为指定的算法设置组件的值,并选中文本

设置组件的数据源。

参数

value String 要设置的值

示例

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

value

获取或设置组件的值

参数

value String 要设置的值
<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原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课