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.

Posted in Jquery. 4 Comments »

4 Responses to “How to implement quick search jquery plugin in ?”

  1. V Karumanchi Says:

    Hi Chandradev ,

    Where cane i get this Quick search .js file

  2. Chandra Dev Says:

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

  3. isha Says:

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

    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 )

Google+ photo

You are commenting using your Google+ 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.

%d bloggers like this: