This help article describes the events fired by RadAutoCompleteBox, their usage and most notable event arguments.
Event Name | Description | Arguments |
|---|
change |
Fires when the value of the RadAutoCompleteBox changes.
| e.target - the RadAutoCompleteBox control whose value has changed. The new value can be accessed
through e.target.value.
|
close |
Fires when the dropdown list of RadAutoCompleteBox is closed.
| e.target - the RadAutoCompleteBox control whose dropdown was closed.
|
databinding |
Fires when the control is about to databind.
| e.target - the RadAutoCompleteBox control which is about to be bound.
|
databound |
Fires immediately after the control is databound.
| e.target - the RadAutoCompleteBox control which has been bound.
|
open |
Fires when the dropdown list of RadAutoCompleteBoxis shown.
| e.target - the RadAutoCompleteBox control whose dropdown has been opened.
|
select |
Fires when an item is selected from the dropdown list.
| e.target - the RadAutoCompleteBox control in which an item has been selected.
e.item - the jQuery object which represents the selected item.
|
The following example shows how to use the select event to access information about the selected item:
| Control Declaration |  Copy |
|---|
<span id="myAutoCompleteBox" data-win-control="Telerik.UI.RadAutoCompleteBox" data-win-options="{
dataSource: [
{ Name: 'Item1'},
{ Name: 'Item2'},
{ Name: 'Item3'}
],
dataTextField: 'Name',
onselect: Sample.Helpers.itemSelected
}"></span>
<span id="selection" style="color: #33ccff"></span> |
| Handling the select Event | Copy |
|---|
WinJS.Namespace.define("Sample.Helpers", {
itemSelected: WinJS.Utilities.markSupportedForProcessing(function (e) {
var itemIndex = e.item.index();
var dataItem = e.target.dataItem(itemIndex);
document.getElementById("selection").innerText = "Selected: " + dataItem.Name;
})
});
|