本節(jié)專門為大家介紹 KendoUI 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í)體。

重要提示：

通過(guò)代碼更改組件值時(shí)事件不會(huì)觸發(fā)。

 

Event Data

e.sender kendo.ui.AutoComplete

觸發(fā)事件的組件實(shí)體

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

e.sender kendo.ui.AutoComplete

觸發(fā)事件的組件實(shí)體

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

e.sender kendo.ui.AutoComplete

觸發(fā)事件的組件實(shí)體

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

e.sender kendo.ui.AutoComplete

觸發(fā)事件的組件實(shí)體

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

e.item jQuery	jQuery對(duì)象，代表選中的項(xiàng)
e.sender kendo.ui.AutoComplete	觸發(fā)事件的組件實(shí)體

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