Kendo UI API中文介绍二：AutoComplete (5)

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