本節(jié)專門為大家介紹 Kendo UI AutoComplete 的5個事件，包括更改、關閉/打開、數據綁定、選擇。至此AutoComplete的所有API均介紹完畢。下一節(jié)將跟大家介紹Button。

Events

change

當用戶更改了組件值時會觸發(fā)這個事件。

事件處理器函數內容（由this引出）會設置為組件實體。

重要提示：

通過代碼更改組件值時事件不會觸發(fā)。

Event Data

示例-初始化期間觸發(fā)"change"事件

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

示例-在初始化之后觸發(fā)"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

當用戶關閉組件的建議窗口時會觸發(fā)這個事件。

Event Data

示例-初始化期間觸發(fā)"close"事件

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

示例-在初始化之后觸發(fā)"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

當組件綁定到數據源中的數據時觸發(fā)該事件。

Event Data

示例-初始化期間觸發(fā)"dataBound"事件

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

示例-在初始化之后觸發(fā)"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

當用戶打開建議窗口時觸發(fā)該事件

Event Data

示例-初始化期間觸發(fā)"open"事件

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

示例-初始化之后觸發(fā)"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

當用戶選中建議窗口中的某一項時觸發(fā)該事件。

重要提示：

當用程序選中某項時不會觸發(fā)該事件。

Event Data

示例- 初始化期間觸發(fā)"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>

示例- 初始化之后觸發(fā)"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原廠開發(fā)工程師舉行線上公開課，使用該控件的朋友千萬別錯過哦>>