Search GridView records (data) on TextBox KeyPress 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;

 
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.

  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, "Rama devi","India");

        dt.Rows.Add(2, "Jason steve", "America");

        dt.Rows.Add(3, "Rajitha Ganesh", "India");

        dt.Rows.Add(4, "Kshatriya Dev", "Australia");

        GridView1.DataSource = dt;

        GridView1.DataBind();

    }

}

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);

}

  

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.

<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>