How to implement quick search jquery plugin in ?


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 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" "">
<html xmlns="">
<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>

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

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();
                EmpDetails.DataSource = dt;

I hope it will be useful to somebody.


4 thoughts on “How to implement quick search jquery plugin in ?

  1. V Karumanchi January 22, 2014 / 12:11 pm

    Hi Chandradev ,

    Where cane i get this Quick search .js file

  2. Chandra Dev January 28, 2014 / 7:07 pm

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

  3. 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,


  4. sonal June 14, 2016 / 9:29 am

    Hi ,

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

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.