Highlight matching text in filtered items of RadAutoCompleteBox

1 posts, 0 answers
  1. Peter
    Peter avatar
    9 posts
    Member since:
    Jan 2017

    Posted 18 Dec 2017 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2017 R3

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadAutoCompleteBox, .NET 4.0/4.5 C#
    PROJECT DESCRIPTION

    This example demonstrates how the string in the item's text that matches the filter string can be highlighted. A similar functionality is observed in the RadComboBox - ComboBox Filtering Functionality


    JavaScript:

    <script>
        var $ = $telerik.$;
     
        function highlightDropDownItems(autocompletebox) {
            autocompletebox._dropDown._items.forEach(function myfunction(item) {
                var regex = new RegExp(autocompletebox.get_text(), 'gi')
                var response = item._element.textContent.replace(regex, function (str) {
                    // modify the enclosing HTML of the text
                    return "<strong>" + str + "</strong>"
                });
     
                $(item._element).html(response);
            });
        }
     
        // Used when EnableClientFiltering="false"
        var original_populateDropDownFunction = Telerik.Web.UI.RadAutoCompleteBox.prototype._populateDropDown;
        function new_populateDropDownFunction(data, itemsRendered, renderShowAllButton, dataFields) {
            original_populateDropDownFunction.call(this, data, itemsRendered, renderShowAllButton, dataFields);
            highlightDropDownItems(this);
        }
     
        // Used when EnableClientFiltering="true"
        var originalOpenFunction = Telerik.Web.UI.RadAutoCompleteBox.DropDown.prototype.open;
        function newOpenFunction(positionInfo) {
            originalOpenFunction.call(this, positionInfo);
     
            var autocompletebox = this._dropDown.get_anchor().control;
            highlightDropDownItems(autocompletebox);
        }
     
        function OnClientLoad(sender, args) {
            if (sender.get_enableClientFiltering()) {
                Telerik.Web.UI.RadAutoCompleteBox.DropDown.prototype.open = newOpenFunction;
            } else {
                Telerik.Web.UI.RadAutoCompleteBox.prototype._populateDropDown = new_populateDropDownFunction;
            }
        }
    </script>


    Markup:

    <telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2"
        EmptyMessage="Please type here"
        DataTextField="ShipName"
        DataValueField="OrderID"
        OnClientLoad="OnClientLoad"
        InputType="Token"
        EnableClientFiltering="true">
    </telerik:RadAutoCompleteBox>

    Code behind:

    protected void Page_Load(object sender, EventArgs e)
    {
        RadAutoCompleteBox2.DataSource = GetDataSource();
        RadAutoCompleteBox2.DataBind();
    }
     
    private DataTable GetDataSource()
    {
        DataTable dataTable = new DataTable();
     
        DataColumn column = new DataColumn();
        column.DataType = Type.GetType("System.Int32");
        column.ColumnName = "OrderID";
        dataTable.Columns.Add(column);
     
        column = new DataColumn();
        column.DataType = Type.GetType("System.String");
        column.ColumnName = "ShipName";
        dataTable.Columns.Add(column);
     
        DataColumn[] PrimaryKeyColumns = new DataColumn[1];
        PrimaryKeyColumns[0] = dataTable.Columns["OrderID"];
        dataTable.PrimaryKey = PrimaryKeyColumns;
     
        for (int i = 0; i <= 80; i++)
        {
            DataRow row = dataTable.NewRow();
            row["OrderID"] = i + 1;
            row["ShipName"] =  (i + 1) + " ShipName";
            dataTable.Rows.Add(row);
        }
     
        return dataTable;
    }




Back to Top