世俱杯 2025

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

Events

change

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

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

重要提示：

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

Event Data

示例-初始化期间触发"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

示例-初始化期间触发"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

示例-初始化期间触发"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

示例-初始化期间触发"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

示例- 初始化期间触发"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原厂开发工程师举行线上公开课，使用该控件的朋友千万别错过哦>>