Wednesday, December 7, 2011

Jquery Live Search – A Sample Implementation of John Nunemaker’s Jquery Live Search

This week actually I was looking for a Jquery Live search Plugin . While browsing through , I found a very beautiful implementation by John Nunemaker  (The Original article you can found here ) . 

Later I noticed that many people are looking for a code which helps them to implement this very easily .

Please see the implementation below

First of all you have to download  and add the live search plugin from here  and Quick Silver Plugin from here  to your project.

And see the implementation Below

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQ.aspx.cs" Inherits="JQ" %>

<!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></title>

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script src="Scripts/quicksilver.js" type="text/javascript"></script>

<script src="Scripts/jquery.livesearch.js" type="text/javascript"></script>

</head>

<body>

<script type="text/javascript" charset="utf-8">

$(document).ready(function () {

$('#txtSearch').liveUpdate('List').focus();

});

</script>

<form runat="server">

<div>

<div>

<asp:TextBox runat="server" Text="" ID="txtSearch"></asp:TextBox>

</div>

<ul id="List">

<li>Hello World</li>

<li>This is a Jquery Live Search plugin Implementation</li>

<li>Done By Sreeraj R</li>

<li>ASP.Net</li>

<li>Jquery</li>

<li>Live Search</li>

<li>Implementation</li>

<li>CSS</li>

</ul>

</div>

</form>

</body>

</html>