Using Telerik RadAutoCompleteBox for Windows 8 (HTML)

In this post, we’re going to look and see how ridiculously easy it is to add auto complete behavior functionality, as demonstrated in the sample application built for the Windows 8 controls. If you haven’t done so already, download the RadControls for Windows 8 sample demo available in the Windows Store. This sample application comes with control demonstrations and sample code, which is also available when you download the source control.

First, we need an input element, as shown below.

<input class=”Member” type=”text” data-win-control=”Telerik.UI.RadAutoCompleteBox” />

Technically, we don’t need an input control, as we could also use a span element. The more important factor of this element definition is the data-win-control property, which specifies that it is a RadAutoCompleteBox control. This is a standard Windows 8 declaration of a control. Microsoft includes a variety of other types of data properties for specifying other settings, like data-win-bind for binding data to the view, data-win-options for providing initialization options, and much more.

Using the data-win-options property, the RadAutoCompleteBox control allows us to supply several properties directly in the markup. For instance, my control could have used the following setup, taken from the Telerik examples:

data-win-options=”{
dataSource: {data: Telerik.QSF.HTML.Examples.AutoCompleteBox.Configurator.countries},
height: 330,
minLength: 2,
dataTextField: ‘title’
}”

These additional examples save us from supplying additional information in code. However, if we need that finer control, the RadAutoCompleteBox has a server-side API. For instance, to bind a collection of JSON objects to the autocomplete, all we need to do is the following.

var members = items.querySelector(“.Member”).winControl; //find the control by CSS class
var _members = new Telerik.Data.DataSource( .. );
member.dataSource = _members.dataSource;

Similar to how Windows Store Apps use a WinJS.Binding.List for it’s binding purposes, Telerik also has it’s own binding list, which is a DataSource control. JSON that was streamed from the database server is sent to the client, wrapped in a DataSource object, and linked to the control.

And that is it; that’s all that it takes to wire up the AutoComplete control.