Como resaltar los resultados de búsqueda en un GridView

Resaltar las busquedas asp.net

En una ocasión en mi trabajo me pidieron que un GridView, tuviera la opción de búsqueda y que los resultados que coincidieran con la búsqueda se resaltaran el lugar donde estaba la palabra que se estaba buscando. Buscando en Google encontré un artículo que me ayudo un poco Destacando Búsquedas por palabras clave en un control Web DataGrid , este artículo me ayudo con la base de lo que yo hice.

Paso 1. Crear un GridView

Crea un Gridview sencillo con TemplateFields para los campos que desea buscar. En mi ejemplo, yo llamé a la Gridview Gridview1 y creé un TemplateField para la columna de búsqueda “Text”. El otro punto de interés es que la declaración de Eval para esto campo se pasa como parámetro en una función que llamó RemarcarTexto.

<asp:GridView ID="Gridview1" runat="server" AutoGenerateColumns="False" 
AllowPaging="True" AllowSorting="True" DataSourceID="SqlDataSource1" Width="800px" 
        BackColor="White" BorderColor="#CC9966" BorderStyle="None" BorderWidth="1px" CellPadding="4" Font-Names="Trebuchet MS">
<Columns>
    <asp:BoundField DataField="tof_id" HeaderText="ID" SortExpression="tof_id" ControlStyle-Width="30px" />
    <asp:TemplateField HeaderText="Text" SortExpression="tof_etiqueta">
        <ItemStyle Width="400px" HorizontalAlign="Left" />
        <ItemTemplate>

    <asp:Literal  ID="lblFirstname" Text='<%# 
                RemarcarTexto(Eval("tof_etiqueta")) %>' runat="server"></asp:Literal>           
        </ItemTemplate>
    </asp:TemplateField>    
    <asp:BoundField DataField="tof_ventanilla" HeaderText="Ventanilla"
        SortExpression="tof_ventanilla" ItemStyle-Width="130px" >
<ItemStyle Width="130px"></ItemStyle>
    </asp:BoundField>
    <asp:BoundField DataField="tof_archivo" HeaderText="Archivo"
        SortExpression="tof_archivo" ItemStyle-Width="130px" >
<ItemStyle Width="130px"></ItemStyle>
    </asp:BoundField>
</Columns>
        <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
        <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />
        <RowStyle BackColor="White" ForeColor="#330099" />
        <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />
        <SortedAscendingCellStyle BackColor="#FEFCEB" />
        <SortedAscendingHeaderStyle BackColor="#AF0101" />
        <SortedDescendingCellStyle BackColor="#F6F0C0" />
        <SortedDescendingHeaderStyle BackColor="#7E0000" />
</asp:GridView>

Paso 2: Crear un origen de datos con un FilterExpression

Agrega FilterExpression a fin de que se pueda realizar nuestra funcionalidad de búsqueda. El FilterExpression que estoy utilizando lo que hace es filtrar la columna Text con un campo de texto, que es donde se va a capturar el texto. Lo ideal es no usar sentencias SQL en mi origen de datos, esto es simplemente para mostrar el ejemplo más fácil. Los caracteres % del FilterExpression son un comodín para encontrar cualquier texto antes o después de la expresión de búsqueda como un LIKE en SQL.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
                SelectCommand="SELECT top 10 [tof_etiqueta], [tof_ventanilla], [tof_id], [tof_archivo] FROM [TOficinaOtra] WHERE ([tof_etiqueta] NOT LIKE '%<a%')"
                ConnectionString="<%$ ConnectionStrings:ConnectionString2 %>"
                FilterExpression="tof_etiqueta like '%{0}%'">
                <FilterParameters>
                    <asp:ControlParameter Name="tof_etiqueta" ControlID="txtSearch"
                        PropertyName="Text" />
                </FilterParameters>
            </asp:SqlDataSource>

Paso 3: Agregar un campo de búsqueda y botones

Este paso es fácil, basta con crear un cuadro de texto que llame txtSearch - este es el que hace referencia en el FilterExpression en el Paso 2.

<asp:TextBox ID="txtSearch" runat="server" />
<asp:Button ID="btnSearch" runat="server" Text="Buscar" />
<asp:Button ID="btnCleajavascript:void(0)r" runat="server" Text="Limpiar" />

Paso 4: Agregar el código

El código siguiente lo que hace en principio, es que cada vez que se muestran los datos en nuestro GridView, comprueba si hay algún texto que sea igual al de la búsqueda y utiliza una expresión regular para marcar el texto con amarillo por medio de CSS.

Imports System.Text.RegularExpressions
Public Class GridviewSearchDemo
    Inherits System.Web.UI.Page
    Public SearchString As String = ""
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    End Sub
    Public Function RemarcarTexto(ByVal InputTxt As String) As String
        ' This function is called whenever text is displayed in the FirstName
        ' and LastName fields from our database. If we're not searching then 
        ' just return the original input, this speeds things up a bit

        If SearchString = "" Then
            Return InputTxt
        Else
            ' Otherwise create a new regular expression and evaluate the 
            ' FirstName and LastName fields against our search string.
            Dim ResultStr As Regex
            ResultStr = New Regex(SearchString.Replace(" ", "|"),
                 RegexOptions.IgnoreCase)
            Return ResultStr.Replace(InputTxt, New MatchEvaluator(AddressOf ReplaceWords))
        End If
    End Function

    Public Function ReplaceWords(ByVal m As Match) As String
        ' This match evaluator returns the found string and adds it a CSS 
        ' class I defined as 'highlight'
        Return "<span class='resaltar'>" + m.ToString + "</span>"
    End Function

    Protected Sub btnClear_Click1(sender As Object, e As EventArgs) Handles btnClear.Click
        txtSearch.Text = ""
        SearchString = ""
        Gridview1.DataBind()
    End Sub

    Protected Sub btnSearch_Click1(sender As Object, e As EventArgs) Handles btnSearch.Click
        SearchString = txtSearch.Text
    End Sub
End Class

Paso 5: Agregue la clase CSS para remarcar el texto

El paso final es agregar la clase CSS que pondrá el texto amarillo y listo ya cuentas con un gridview con búsquedas remarcadas.

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

!!!Si tienes algun problema en la implementación puedes escribirme y con gusto te ayudo.