Telerik UI for Windows 8 HTML

This help article describes the events fired by RadAutoCompleteBox, their usage and most notable event arguments.

Event Name




Fires when the value of the RadAutoCompleteBox changes. - the RadAutoCompleteBox control whose value has changed. The new value can be accessed through


Fires when the dropdown list of RadAutoCompleteBox is closed. - the RadAutoCompleteBox control whose dropdown was closed.


Fires when the control is about to databind. - the RadAutoCompleteBox control which is about to be bound.


Fires immediately after the control is databound. - the RadAutoCompleteBox control which has been bound.


Fires when the dropdown list of RadAutoCompleteBoxis shown. - the RadAutoCompleteBox control whose dropdown has been opened.


Fires when an item is selected from the dropdown list. - 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 imageCopy
<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 id="selection" style="color: #33ccff"></span>
Handling the select Event Copy imageCopy
WinJS.Namespace.define("Sample.Helpers", {
    itemSelected: WinJS.Utilities.markSupportedForProcessing(function (e) {
        var itemIndex = e.item.index();
        var dataItem =;
        document.getElementById("selection").innerText = "Selected: " + dataItem.Name;