This is a migrated thread and some comments may be shown as answers.

Highlight matches

3 Answers 103 Views
SearchBox
This is a migrated thread and some comments may be shown as answers.
OfficeHeart
Top achievements
Rank 1
OfficeHeart asked on 11 Jun 2013, 01:09 PM
Hello,

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

Many thanks,
Martin

3 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 14 Jun 2013, 01:39 PM
Hi Martin,

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

Regards,
Plamen
Telerik
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Bryan
Top achievements
Rank 1
answered on 19 Feb 2020, 08:55 PM

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;
            }

        }

 

0
Peter Milchev
Telerik team
answered on 20 Feb 2020, 03:15 PM

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:

<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

Get quickly onboarded and successful with UI for ASP.NET AJAX with the Virtual Classroom technical trainings, available to all active customers. Learn More.
Tags
SearchBox
Asked by
OfficeHeart
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Bryan
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or