Telerik UI for Windows 8 HTML

When the user types text into a RadAutoCompleteBox, its suggestions are filtered only to matching items. In scenarios where the filtering uses a "contains" function and the search string cannot be immediately spotted in a match, you may want to highlight the matching part of the text. To achieve this, you can follow the instructions below.

To highlight parts of the text in the matching results, you can use a template for items and wrap the matched piece of text in a styled inline HTML element, for example <span>. To do this, perform the following steps:

  1. Define the RadAutoCompleteBox wrapper:

    HTML Copy imageCopy
    <span id="autoComplete"></span>
  2. Instantiate the RadAutoCompleteBox and assign it a template function:

    JavaScript Copy imageCopy
    var matchAutoComplete = new Telerik.UI.RadAutoCompleteBox(document.getElementById("autoComplete"), {
        dataSource: {
            transport: {
                read: {
                    url: "",
                    dataType: "json"
            schema: {
                data: "value"
        dataTextField: "ProductName",
        filter: "contains",
        template: itemTemplate
  3. Declare a template function that triggers the matching logic:

    JavaScript Copy imageCopy
    function itemTemplate(item) {
        return matchQuery(item.ProductName);
  4. The logic of the matching function is: Find the start and end index of the matching string in the current item. Then replace the substring between them with the same string wrapped in an inline HTML element, which has a class name assigned.

    JavaScript Copy imageCopy
    function matchQuery(name) {
        var autoCompleteBox = document.getElementById("autoComplete").winControl;
        var query = autoCompleteBox.text.toLowerCase();
        var index = name.toLowerCase().indexOf(query);
        var match = name.substring(index, index + query.length);
        return name.replace(match, "<span class='match'>" + match + "</span>");
  5. Provide some styling for the match:

    CSS Copy imageCopy
    .match {
            color: #33ccff;

The result of typing into the RadAutoCompleteBox now looks like this:


This implementation is part of our SDK Examples and is available for download at the following link: Telerik Windows 8 HTML SDK under AutoCompleteBox/TextMatchHighlighting.

See Also