Rank 1
Is it possible to highlight the matches in the results of RadSearchBox?
Many thanks,
Martin
3 Answers, 1 is accepted
Currently such scenario is not supported by RadSearchBox. Please excuse us for this limitation of our control.
Plamen
Telerik
Rank 1
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;
}
}
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