Highlight matches

[OfficeHeart]

Hello,

Is it possible to highlight the matches in the results of RadSearchBox?

Many thanks,
Martin

[Plamen]

Hi Martin,

 
Currently such scenario is not supported by RadSearchBox. Please excuse us for this limitation of our control.

Regards,
Plamen
Telerik

[Bryan]

I know this post is very old, but just had to do this, so if anyone is looking, this is what I did, using web service binding

 <div id="topSearchBox" class="searchContainer">
                            <telerik:RadSearchBox RenderMode="Lightweight" ID="TopRadSearchBox" runat="server"
                                EmptyMessage="<%$ Resources:Common, SEARCH_DEVICES %>"
                                MaxResultCount="20" MinFilterLength="2"
                                                OnSearch="TopRadSearchBox_Search">
                                <DropDownSettings Width="100%">
                                    <HeaderTemplate>
                                        <ul>
                                            <li class="col1"><asp:Literal runat="server" Text="<%$ Resources:Common, IP_ADDRESS%>" /></li>
                                            <li class="col2"><asp:Literal runat="server" Text="<%$ Resources:Common, MAC_ADDRESS%>" /></li>
                                            <li class="col3"><asp:Literal runat="server" Text="<%$ Resources:Common, SERIAL_NUMBER%>" /></li>
                                            <li class="col4"><asp:Literal runat="server" Text="<%$ Resources:Common, LOCATION%>" /></li>
                                            <li class="col5"><asp:Literal runat="server" Text="<%$ Resources:Common, ASSET_NUMBER%>" /></li>
                                            <li class="col6"><%= Device_CustomField_1_Name %></li>
                                            <li class="col7"><%= Device_CustomField_2_Name %></li>
                                        </ul>
                                    </HeaderTemplate>
                                    <ClientTemplate>
                                        <ul>
                                            <li class="col1">#=  DataItem.IPAddress #</li>
                                            <li class="col2">#=  DataItem.MacAddress #</li>
                                            <li class="col3">#=  DataItem.SerialNumber #</li>
                                            <li class="col4">#=  DataItem.Location #</li>
                                            <li class="col5">#=  DataItem.AssetNumber #</li>
                                            <li class="col6">#=  DataItem.Device_CustomField_1 #</li>
                                            <li class="col7">#=  DataItem.Device_CustomField_2 #</li>
                                        </ul>
                                    </ClientTemplate>
                                </DropDownSettings>
                                   <WebServiceSettings Method="GetSearchItems" Path="SupplyGridData.asmx" />
                            </telerik:RadSearchBox>

code in asmx file

   public SearchBoxData GetSearchItems(SearchBoxContext context)
        {
            try
            {
                UserWithFullDetails userWithFullDetails = (UserWithFullDetails)Session["User"];
                List<SearchBoxItemData> items = new List<SearchBoxItemData>();

                //get list of search result objects               
                List<DeviceSearchResult> deviceSearchResults = DeviceSearchResult.GetDeviceRearchResults(context.Text, userWithFullDetails);

                foreach (DeviceSearchResult deviceSearchResult in deviceSearchResults)
                {
                    SearchBoxItemData searchBoxItemData = new SearchBoxItemData();
                    //convert results to dictionary object
                    Dictionary<String, object> searchResultsProperties = deviceSearchResult.GetType().GetProperties(BindingFlags.Instance | BindingFlags.Public).ToDictionary(prop => prop.Name, prop => prop.GetValue(deviceSearchResult, null));
                    //check each property
                    foreach (KeyValuePair<String, object> searchResultsProperty in searchResultsProperties)
                    {
                        //if
                        if (searchResultsProperty.Value != null)
                        {
                            // if not null, see if it contains the search text, and if it does, insert the <mark> tag around text
                            // we do this instead of replace, as that is case sensitive
                            Int32 searchlen = context.Text.Length, foundIndex = 0;
                            String highlightedValue = searchResultsProperty.Value.ToString();
                            foundIndex = highlightedValue.IndexOf(context.Text, StringComparison.OrdinalIgnoreCase);
                            while (foundIndex > -1)
                            {
                                highlightedValue = highlightedValue.Insert(foundIndex, "<mark>");
                                foundIndex += 6 + searchlen;
                                highlightedValue = highlightedValue.Insert(foundIndex, "</mark>");
                                foundIndex += 7;
                                foundIndex = highlightedValue.IndexOf(context.Text, foundIndex, StringComparison.OrdinalIgnoreCase);
                            }
                            searchBoxItemData.DataItem.Add(searchResultsProperty.Key, highlightedValue);
                        }
                        else
                            searchBoxItemData.DataItem.Add(searchResultsProperty.Key, "");
                    }
                    searchBoxItemData.Value = deviceSearchResult.DeviceID.ToString();
                    items.Add(searchBoxItemData);
                }


                SearchBoxData result = new SearchBoxData();
                result.Items = items.ToArray();
                return result;
            }
            catch (Exception err)
            {
                Util.ErrorLog("SupplyGridData:GetSearchItems - " + err.ToString());

                return null;
            }

        }

 

[Peter Milchev]

Hello Bryan,

Thank you for sharing your solution with the community. 

I would like to add another approach people might consider useful, based on the RegEx highlighting logic in the following KB article:

• https://www.telerik.com/support/kb/aspnet-ajax/details/highlight-text-inside-html-elements-and-templates 

<telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" Filter="Contains" runat="server" Width="300" EmptyMessage="Search Continents">
    <DropDownSettings Height="150" Width="250" />
</telerik:RadSearchBox>

<style>
    .highlight {
        background: yellow;
    }
</style>

<script>
    //  https://www.telerik.com/support/kb/aspnet-ajax/details/highlight-text-inside-html-elements-and-templates

    function escapeRegExp(str) {
        //https://stackoverflow.com/questions/3446170/escape-string-for-use-in-javascript-regex
        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
    }
    function highlightText(text, originalHtml) {
        var newHtml;

        newHtml = originalHtml.replace(new RegExp(escapeRegExp(text), "gi"), function replace(match) {
            return '<span class="highlight">' + match + '</span>';
        })

        return newHtml;
    }

    Telerik.Web.UI.RadSearchBox.prototype.original_populateDropDown = Telerik.Web.UI.RadSearchBox.prototype._populateDropDown;
    Telerik.Web.UI.RadSearchBox.prototype._populateDropDown = function ($elements, renderShowAllButton) {
        var searchbox = this;
        var searchText = searchbox.get_text();

        $elements.each(function () {
            var liElement = this;
            liElement.innerHTML = highlightText(searchText, liElement.innerHTML);
        });

        this.original_populateDropDown($elements, renderShowAllButton);
    }
</script>

protected void Page_Load(object sender, EventArgs e)
{
    RadSearchBox1.DataSource = new List<string>() { "Europe", "America", "Asia", "Africa", "Australia" };
}

 

Regards,
Peter Milchev
Progress Telerik