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

原创|使用教程|编辑:我只采一朵|2014-05-22 09:50:26.000|阅读 2052 次

概述:本节专门为大家介绍 Kendo UI AutoComplete 的5个事件。

相关链接:

本节专门为大家介绍 Kendo UI AutoComplete 的5个事件,包括更改、关闭/打开、数据绑定、选择。至此AutoComplete的所有API均介绍完毕。下一节将跟大家介绍Button。

Events


change

当用户更改了组件值时会触发这个事件。

事件处理器函数内容(由this引出)会设置为组件实体。

重要提示:

通过代码更改组件值时事件不会触发。

Event Data

e.sender kendo.ui.AutoComplete 触发事件的组件实体

示例-初始化期间触发"change"事件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
change: function(e) {
var value = this.value();
// Use the value of the widget
}
});
</script>

示例-在初始化之后触发"change"事件

<input id="autocomplete" />
<script>
function autocomplete_change(e) {
var value = this.value();
// Use the value of the widget
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>

close

当用户关闭组件的建议窗口时会触发这个事件。

Event Data

e.sender kendo.ui.AutoComplete 触发事件的组件实体

示例-初始化期间触发"close"事件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
close: function(e) {
// handle the event
}
});
</script>

示例-在初始化之后触发"close"事件

<input id="autocomplete" />
<script>
function autocomplete_close(e) {
// handle the event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("close", autocomplete_close);
</script>

dataBound

当组件绑定到数据源中的数据时触发该事件。

Event Data

e.sender kendo.ui.AutoComplete 触发事件的组件实体

示例-初始化期间触发"dataBound"事件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
dataBound: function(e) {
// handle the event
}
});
</script>

示例-在初始化之后触发"dataBound"事件

<input id="autocomplete" />
<script>
function autocomplete_dataBound(e) {
// handle the event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("dataBound", autocomplete_dataBound);
</script>

open

当用户打开建议窗口时触发该事件

Event Data

e.sender kendo.ui.AutoComplete 触发事件的组件实体

示例-初始化期间触发"open"事件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
open: function(e) {
// handle the event
}
});
</script>

示例-初始化之后触发"open"事件

<input id="autocomplete" />
<script>
function autocomplete_open(e) {
// handle the event
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("open", autocomplete_open);
</script>

select

当用户选中建议窗口中的某一项时触发该事件。

重要提示:

当用程序选中某项时不会触发该事件。

Event Data

e.item jQuery jQuery对象,代表选中的项
e.sender kendo.ui.AutoComplete 触发事件的组件实体

示例- 初始化期间触发"select"事件

<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
select: function(e) {
var item = e.item;
var text = item.text();
// Use the selected item or its text
}
});
</script>

示例- 初始化之后触发"select"事件

<input id="autocomplete" />
<script>
function autocomplete_select(e) {
var item = e.item;
var text = item.text();
// Use the selected item or its text
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("select", autocomplete_select);
</script>
慧都特邀Kendo UI原厂开发工程师举行线上公开课,使用该控件的朋友千万别错过哦>>查看详情

kendo ui 公开课



标签:APIKendoUI

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

文章转载自:慧都控件

登录 慧都网发表评论


慧都网友 2014-05-22 11:58:04.000
0

mark 辛苦了


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
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