javad3151
دوشنبه 25 مهر 1384, 07:34 صبح
برای تغییر رنگ کلمات پیدا شده :
Highlighting Selected Words
The first thing you may be wondering is how in the world we're going to highlight a user's search criteria. Rather than delve into the specifics in this article, I will point you to two other excellent articles here on 4Guys that explain these topics. First, take a gander at Richard Lowe's Common Applications of Regular Expressions, which illustrates how to use regular expressions such functionality can easily be incorporated through the use of regular expressions. (You may also wish to check out and this live demo.) As Richard's article shows, highlighting selected words is fairly easy to do with regular expressions. (For more information on regular expressions be sure to check out the Regular Expressions Article Index.)
A second article you should read, if you haven't already, is Scott Mitchell's Customizing DataBinded Output in Templates, which discusses how alter the output of a templated Web control based upon the data in the databound sections of the template.
A good understanding of both of these two articles is an important prerequisite for this article. To accomplish highlighting of search terms in a DataGrid we will need to use the regular expression techniques discussed in Richard's article as well as the techniques for altering the databound output based upon the value of the data, as discussed in Scott's article.
The Code for the DataGrid
Our DataGrid will need to contain a TemplateColumn since we need to be able to alter the search results on the fly (in order to highlight the search terms in the results). Note that you could also accomplish this same output using a DataList or Repeater control; however, using the DataGrid provides certain advantages, such as the ability to easily page and sort the results.
Below you can see the bare minimum needed for the DataGrid output. You can "fancy it up" as you see fit. To learn more about "prettying" up the DataGrid's output be sure to read this article.
<asp:DataGrid runat="server" id="SearchResults" AutoGenerateColumns="False">
<Columns>
<asp:TemplateColumn>
<ItemTemplate>
<%# Highlight(searchword, DataBinder.Eval(Container.DataItem, "data")),
"<span class=highlight>", "</span>") %>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
When the DataGrid is rendered (that is, when its DataBind() method is called), the Highlight function is called for each result. The task for the Highlight is to highlight each instance of the user's search keyword stored in the variable searchword in the above code example. (Note for this to work you will need to create a page-level variable named searchword that is assigned the value of the user's search query when the form is originally posted back. See the live demo to examine how this is done in code.) The Highlight function is defined below:
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
[View a Live Demo!]
Here the Highlight function call accepts four parameters:
Search_Str - This is the word that the user entered for the search string.
InputTxt - The text from the search result "hit".
StartTag - The HTML tag to place before each instance of the word that is to be highlighted.
EndTag - The HTML tag to place after each instance of the word that is to be highlighted.
In the DataGrid code note that the values for StartTag and EndTag chosen were <span class=highlight> and </span>, respectively. This HTML will apply the style of a particular class to the word we wish to highlight. It is vital that somewhere in our ASP.NET page that we add a STYLE HTML tag that defines the highlight class. Feel free to use whatever CSS markup you'd like to in order to have the search word "highlighted." The below CSS will give the highlighted word a yellow background.
<style type="text/css">
.highlight {text-decoration: none;color:black;background:yellow;}
</style>
Conclusion
This article illustrated how to highlight search terms in a DataGrid Web control using regular expressions. There is an accompanying live demo that allows you to search a small database of Woody Allen quotes.
Happy Programming!
برگرفته شده از ASP_NET_4GuysFromRolla_com