Telerik UI for Windows 8 HTML

RadAutoCompleteBox methods provide ways to interact with the control programmatically. You can search the data records, provide a suggestion, close the dropdown list, when it is opened, and focus the control through your code. The following article displays basic examples of how to do these actions programmatically.

In order to be able to interact with the RadAutoCompleteBox, you need to first initialize it and access it in your JavaScript code. The code snippets below show how you can define the control in the mark-up and get it afterwards in the code-behind. In the current example the Telerik.UI.find.AutoCompleteBox() method is used, which "casts" the control object to its proper type and you are provided with IntelliSense. You can find more information regarding the find and to method groups in this article: Enabling Telerik Controls IntelliSense.

Mark-up Copy imageCopy
<span id="autoComplete" data-win-control="Telerik.UI.RadAutoCompleteBox"></span>
<div id="interactionBtnsWrapper">
    <div class="interactionControls">
        <input id="closeBtn" type="button" value="Close" />
        <input id="focusBtn" type="button" value="Focus" />
    </div>
    <div class="interactionControls">
        <input id="suggestion" type="text" />
        <input id="suggestBtn" type="button" value="Suggest" />
    </div>
    <div class="interactionControls">
        <input id="searchText" type="text" />
        <input id="searchBtn" type="button" value="Search" />
    </div>
</div>
RadAutoCompleteBox Setup Copy imageCopy
autoComplete = Telerik.UI.find.AutoCompleteBox("#autoComplete");

var autoCompleteDS = new Telerik.Data.DataSource({
    transport: {
        read: {
            url: "http://services.odata.org/Northwind/Northwind.svc/Products",
            dataType: "json"
        }
    },
    schema: {
        data: "value"
    }
});

autoComplete.dataSource = autoCompleteDS;
autoComplete.dataTextField = "ProductName";
autoComplete.filter = "contains";

document.getElementById("closeBtn").addEventListener("click", closeList);
document.getElementById("focusBtn").addEventListener("click", focusControl);
document.getElementById("suggestBtn").addEventListener("click", SuggestWord);
document.getElementById("searchBtn").addEventListener("click", SearchDataSource);

There are also four buttons defined. Each of the interaction methods is attached as an event handler to the corresponding button. The "Suggest" and "Search" buttons also have an input text field next to them to get string values for the methods.

To focus the control, use its focus() method. It will cause the control to be highlighted, the insertion cursor is displayed and the user can start typing text.

Focusing the Control Copy imageCopy
function focusControl() {
    autoComplete.focus();
}

You can force the dropdown list to close, if it is opened, by using the close() method. Note that this method resets the search settings.

Closing the Dropdown List Copy imageCopy
function closeList() {
    autoComplete.close();
}

In order to force a suggestion on the RadAutoCompleteBox use the suggest() method. It takes a string as an argument and focuses the control, populates it with the string and highlights it. In the current scenario, the suggestion string is passed as the value of an input text box.

Forcing a Suggestion Copy imageCopy
function SuggestWord() {
    var suggestion = document.getElementById("suggestion").value;
    autoComplete.suggest(suggestion);
}

Use the search() method to force the control to filter its data records. The search() method takes a string as an argument and filters the DataSource based on the filter property value of the control. The result is the dropdown list is opened and populated with the filtered data.

Forcing a Search Copy imageCopy
function SearchDataSource() {
    var searchText = document.getElementById("searchText").value;
    autoComplete.search(searchText);
}

See Also