This example demonstrates how to use jQuery quick search plugin with asp.net repeater control. By using quick search plugin you can search content from table on client side, you do not need to post back the page. Quick search plugin can easily integrate with any table to find content.
Let’s see the example
Design code
<!DOCTYPE html>
<html>
<head runat="server">
<title>JQuery Quick search plugin with asp.net repeater control</title>
<style>
#table1
{
width: 500px;
font-size: .80em;
font-family: "Helvetica Neue";
margin: 0px;
padding: 0px;
color: #666;
}
#table1th
{
border-bottom: 1px solid #eee;
border-top: 1pxsolid#eee;
height: 29px;
text-align: left;
padding-left: 10px;
background-color: #fafafa;
}
#table1td
{
border-bottom: 1px solid #eee;
padding-left: 10px;
}
.tbbox
{
margin: 0;
background-color: rgba(247,237,185,0.71);
color: #999;
border: none;
padding: 0;
height: 25px;
}
</style>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"
type="text/javascript"></script>
<script src="jquery.quicksearch.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.tbbox').quicksearch('table#table1 tbody tr');
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table id="table1">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Price</th>
</tr>
<tr>
<td><input type="text" id="title1" class="tbbox"/></td>
<td><input type="text" id="author1" class="tbbox"/></td>
<td><input type="text" id="price" class="tbbox"/></td>
</tr>
</thead>
<tbody>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# ((Book)Container.DataItem).Title %></td>
<td><%# ((Book)Container.DataItem).Author %></td>
<td><%# ((Book)Container.DataItem).Price %></td>
</tr>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
Code behind
protected void Page_Load(object sender, EventArgs e)
{
Repeater1.DataSource = Display();
Repeater1.DataBind();
}
public List<Book> Display()
{
List<Book> Obj = new List<Book>()
{
new Book{ Title="ASP.NET C#", Author="Aamir Hasan", Price= 101.1F},
new Book{ Title="Java script", Author="Aamir Hasan", Price= 40.1F},
new Book{ Title="ASP.NET CSharp", Author="Aamir Hasan", Price= 70.1F}
};
return Obj;
}
public class Book
{
public string Title { get; set; }
public string Author { get; set; }
public float Price { get; set; }
}
Ouput
Download
jquery-quicksearch-with-repeater.zip (2.90 kb)
See live demo