How to implement quick search jquery plugin in asp.net ?

Jquery quick search plugin is very interactive and nice plugin. Just now i implemented in one of my project. It will do very nice way interactive search without any postback. It will do search functionality on client side only.

For implementing this plugin in asp.net is very simple.

Step 1: Take one repeater control and configure like this


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableViewState="false" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>quickSearch Test</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="jquery.quicksearch.js" type="text/javascript"></script>
  <script src="Helper.js" type="text/javascript"></script>
</head>

<body>
  <form id="form1" runat="server">
  <asp:Repeater runat="server" ID="EmpDetails">
    <HeaderTemplate>
      <table id="EmpDetails">
        <thead>
          <tr>
            <th>EmpName</th>
            <th>EmpSal</th>
          </tr>
        </thead>
        <tbody>
    </HeaderTemplate>
    
    <ItemTemplate>
      <tr>
       <td>
          <asp:Repeater ID="Repeater1" runat="server" datasource='<%# Eval("EmpName") %>'>
            <ItemTemplate><%# Container.DataItem %></ItemTemplate>
          </asp:Repeater>
        </td>
        <td><%# Eval("EmpSal") %> </td>
      </tr>
    </ItemTemplate>
    
    <FooterTemplate>
      </tbody> </table>
    </FooterTemplate>
  </asp:Repeater>
  </form>
</body>
</html>

Step 2: Write the Helper javascript file like this



$(document).ready(function() {
    $("#EmpDetails tbody tr").quicksearch({
    // label for displaying Search Field.
    labelText: 'Search By EmpName: ',
    
    // Anchor the search form to the table 
    //  and position it before the table
    attached: '#EmpDetails',
    position: 'before',
    
    // React quickly to keypresses.
    delay: 100,
    
    // Eliminate the "loader".
    loaderText: '',
    
    onAfter: function() {
        if ($('#EmpDetails tbody tr:visible').length == 0) {
        // No Items.  Do something fancy here.
      }
    }
  });
});

Step 3: Write the code to populate the repeater control like this.


using System;
using System.Linq;
using System.Xml.Linq;
using System.Data;
using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        using (SqlConnection con = new SqlConnection("Data Source=.\\sqlexpress;Initial Catalog=EmpDB;Integrated Security=True"))
        {
            using (SqlCommand cmd = new SqlCommand("Select *from tblEmp", con))
            {
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                DataTable dt = new DataTable();
                da.Fill(dt);
                EmpDetails.DataSource = dt;
                EmpDetails.DataBind();
            }
        }
    }
}

I hope it will be useful to somebody.

V Karumanchi January 22, 2014 / 12:11 pm

Hi Chandradev ,

Where cane i get this Quick search .js file

Chandra Dev January 28, 2014 / 7:07 pm

Please type “jquery.quicksearch.js” in google or bings.

isha January 20, 2016 / 2:15 am

Hi Chandradev,

With the help of jquery quicksearch in gridview i can able to search the data.But the searched data ie. the filtered data how to export the searched or filtered data from gridview to excel .I tried it but i am getting only gridview first loaded data not the searched data.plz help me ASAP.’

Thanks in Advance,

Isha

sonal June 14, 2016 / 9:29 am

Hi ,

this is not working with pagination.it fetch data by pages not from entire list of data.
please help me to fix this.