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

原创|使用教程|编辑:我只采一朵|2014-05-21 11:58:11.000|阅读 1839 次

概述:本节专门为大家介绍 Kendo UI AutoComplete 的12个方法。

相关链接:

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



标签:APIKendoUI

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:慧都控件

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
title
相关厂商
相关产品
Kendo UI Web

运用JavaScript和HTML5就能快速创建性能最优的Web应用程序

Kendo UI Mobile

使用HTML5和JavaScript快速开发跨平台原生移动应用程序的移动应用程序框架

Kendo UI DataViz

跨平台跨设备的数据可视化组件

Kendo UI Server Wrappers

帮助你开发基于Kendo UI的出色的HTML5应用程序,并且无需亲自编写JavaScript。

Kendo UI Core

Kendo UI Core是Kendo UI的开源免费版,是HTML5构架下的用于网络和移动开发的工具。

Kendo UI

全新升级的Kendo UI,是创建数据丰富的Web应用程序的最完整UI库。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat