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