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


QuickSearch
Hi

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.

Advertisements
Posted in Jquery. 4 Comments »

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

  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,

    Isha

  4. sonal Says:

    Hi ,

    this is not working with pagination.it 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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: