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

Events

change

當(dāng)用戶更改了組件值時(shí)會(huì)觸發(fā)這個(gè)事件。

事件處理器函數(shù)內(nèi)容（由this引出）會(huì)設(shè)置為組件實(shí)體。

重要提示：

通過代碼更改組件值時(shí)事件不會(huì)觸發(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

當(dāng)用戶關(guān)閉組件的建議窗口時(shí)會(huì)觸發(fā)這個(gè)事件。

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

當(dāng)組件綁定到數(shù)據(jù)源中的數(shù)據(jù)時(shí)觸發(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

當(dāng)用戶打開建議窗口時(shí)觸發(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

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

重要提示：

當(dāng)用程序選中某項(xiàng)時(shí)不會(huì)觸發(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ā)工程師舉行線上公開課，使用該控件的朋友千萬(wàn)別錯(cuò)過哦>>