Highlighting Search Terms Demo

This demo illustrates how to have words you searched on highlighted in the results of a DataGrid Web control. One caveat to note is that there can be a discrepency between the results returned by the search and the highlighted words. That is, if you search on "ant" the hit "It's not that I'm afraid to die. I just don't want to be there when it happens." will be returned because "ant" is a substring in the phrase (... just don't want to be ...). However, the letters won't be highlighted because the regular expression pattern matching is setup to only match on word boundaries (note the \b delimiters). Feel free to remove these delimiters to alter the highlighting algorithm so that the highlighted text matches the search results.

Text to Search:

The Data Being Search
If only God would give me some clear sign! Like making a large deposit in my name at a Swiss bank.
Is sex dirty? Only when it's being done right.
On the plus side, death is one of the few things that can be done just as easily as lying down.
I took a speed reading course and read 'War and Peace' in twenty minutes. It involves Russia.
To *you* I'm an atheist; to God, I'm the Loyal Opposition.
Sex without love is an empty experience, but as empty experiences go, it's a pretty good empty experience.
It's not that I'm afraid to die. I just don't want to be there when it happens.
What if everything is an illusion and nothing exists? In that case, I definitely overpaid for my carpet.
Interestingly, according to modern astronomers, space is finite. This is a very comforting thought-- particularly for people who can never remember where they have left things.
Eighty percent of success is showing up.

Source Code 
<% @Import Namespace="System.Data" %>
<script language="vb" runat="server">
  Dim searchword as String
  Dim pls as New DataTable()

  Sub Page_Load(sender as Object, e as EventArgs)
    BuildDataStore()

  	completeData.DataSource = pls
	completeData.DataBind()
  End Sub


  Sub BuildDataStore()
	Dim dr as DataRow
	
	pls.Columns.Add(new DataColumn("Results", GetType(String)))

    dr = pls.NewRow()
    dr(0) = "If only God would give me some clear sign! Like making a large deposit in my name at a Swiss bank."
	pls.Rows.Add(dr)
	
    dr = pls.NewRow()
    dr(0) = "Is sex dirty? Only when it's being done right."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "On the plus side, death is one of the few things that can be done just as easily as lying down."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "I took a speed reading course and read 'War and Peace' in twenty minutes. It involves Russia."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "To *you* I'm an atheist; to God, I'm the Loyal Opposition."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "Sex without love is an empty experience, but as empty experiences go, it's a pretty good empty experience."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "It's not that I'm afraid to die. I just don't want to be there when it happens."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "What if everything is an illusion and nothing exists? In that case, I definitely overpaid for my carpet."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "Interestingly, according to modern astronomers, space is finite. This is a very comforting thought-- particularly for people who can never remember where they have left things."
	pls.Rows.Add(dr)

    dr = pls.NewRow()
    dr(0) = "Eighty percent of success is showing up."
	pls.Rows.Add(dr)
  End Sub
  
  
  Sub BindData(strQuery as String)
	searchword = strQuery
	
	Dim dv as DataView
	dv = New DataView(pls)
	dv.RowFilter = "Results LIKE '%" & Regex.Replace(searchword,"'","''") & "%'"
	
	SearchResults.DataSource = dv
	SearchResults.DataBind()
  End Sub


	Function Highlight(Search_Str as String, _
	                   InputTxt as String, _
	                   StartTag as String, _
	                   EndTag as String) As String

	  Dim ResultStr As String 
	  Return Regex.Replace(InputTxt, "\b(" & Regex.Escape(Search_Str) & ")\b", _
	           StartTag & "$1" & EndTag, RegExOptions.IgnoreCase)
	End Function
	
	
	Sub searchQuotes(sender as Object, e as EventArgs)
	  BindData(SearchTerm.Text)
	  SearchResults.Visible = True
	End Sub
</script>

  <style type="text/css">
   .highlight {text-decoration: none;color:black;background:yellow;}
  </style>

<form runat="server">
	<b>Text to Search:</b> <asp:TextBox id="SearchTerm" runat="server" />
	<asp:button runat="server" Text="Search Woody Allen Quotes"
	      OnClick="searchQuotes" />
	<p>
	<asp:DataGrid runat="server" id="SearchResults" AutoGenerateColumns="False"
	    Visible="False" ShowHeader="False">
	  <Columns>
	    <asp:TemplateColumn>
	      <ItemTemplate>
	        <%# Highlight(searchword, DataBinder.Eval(Container.DataItem, "results"), "<span class=highlight>", "</span>") %>
	      </ItemTemplate>
	    </asp:TemplateColumn>
	  </Columns>
	</asp:DataGrid>
	<p>
	<b>The Data Being Search</b>
	<asp:datagrid runat="server" id="completeData" ShowHeader="False" />
</form>

[Return to the article]