In this article I will explain with an example, how to search GridView records (data) on TextBox KeyPress event using jQuery in ASP.Net.
In order to search GridView records (data) on TextBox KeyPress event, I am making use of jQuery QuickSearch Plugin which dynamically searches the GridView cells and filters out the unwanted rows and displays only the records (data) that matches the input search term.
 
 
HTML Markup
The HTML Markup consists of an ASP.Net GridView with BoundField columns. I have specified OnDataBound event of the GridView to dynamically add a row with TextBoxes for searching records in each column of GridView.
<asp:GridView ID="GridView1" HeaderStyle-BackColor="#3AC0F2" HeaderStyle-ForeColor="White"
    runat="server" AutoGenerateColumns="false" OnDataBound="OnDataBound">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="100" />
        <asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Width="100" />
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespaces.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the GridView control
I have created a dynamic DataTable with some dummy data and it has been bind to the GridView control in Page Load event.
You can learn more about this technique in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id", GetType(Integer)), New DataColumn("Name", GetType(String)), New DataColumn("Country", GetType(String))})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Adding a Row of TextBox for Searching Data
Inside the OnDataBound event handler, I have created a new GridView Header Row with a TextBox in its each Cell and then added this row to the GridView. These TextBoxes will be used to search the respective GridView column on TextBox KeyPress event.
You will notice that the CssClass property is set for each TextBox with value search_textbox, this has been done to apply the jQuery QuickSearch Plugin client side using the jQuery CSS class selector.
C#
protected void OnDataBound(object sender, EventArgs e)
{
    GridViewRow row = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal);
    for (int i = 0; i < GridView1.Columns.Count; i++)
    {
        TableHeaderCell cell = new TableHeaderCell();
        TextBox txtSearch = new TextBox();
        txtSearch.Attributes["placeholder"] = GridView1.Columns[i].HeaderText;
        txtSearch.CssClass = "search_textbox";
        cell.Controls.Add(txtSearch);
        row.Controls.Add(cell);
    }
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row);
}
 
VB.Net
Protected Sub OnDataBound(sender As Object, e As EventArgs)
    Dim row As New GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Normal)
    For i As Integer = 0 To GridView1.Columns.Count - 1
        Dim cell As New TableHeaderCell()
        Dim txtSearch As New TextBox()
        txtSearch.Attributes("placeholder") = GridView1.Columns(i).HeaderText
        txtSearch.CssClass = "search_textbox"
        cell.Controls.Add(txtSearch)
        row.Controls.Add(cell)
    Next
    GridView1.HeaderRow.Parent.Controls.AddAt(1, row)
End Sub
 
Search GridView records (data) on TextBox KeyPress using jQuery in ASP.Net
 
 
Applying the jQuery QuickSearch Plugin
The jQuery QuickSearch Plugin is applied using the jQuery CSS class selector for each TextBox inside the GridView Header Row.
The jQuery QuickSearch Plugin is included in the attached sample code. You can also download it using the following URL Download jQuery QuickSearch Plugin.
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="quicksearch.js"></script>
<script type="text/javascript">
    $(function () {
        $('.search_textbox').each(function (i) {
            $(this).quicksearch("[id*=GridView1] tr:not(:has(th))", {
                'testQuery': function (query, txt, row) {
                    return $(row).children(":eq(" + i + ")").text().toLowerCase().indexOf(query[0].toLowerCase()) != -1;
                }
            });
        });
    });
</script>
 
 
Screenshot
Search GridView records (data) on TextBox KeyPress using jQuery in ASP.Net
 
 
Demo
View Demo
 
 
Downloads
Download Code