Apr 02, 2012, 8:45 AM
Live search
LiveSearchHandler.ashx
public class LiveSearchHandler : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";
var start = 0;
var limit = 10;
var sort = string.Empty;
var dir = string.Empty;
var query = string.Empty;
if (!string.IsNullOrEmpty(context.Request["start"]))
{
start = int.Parse(context.Request["start"]);
}
if (!string.IsNullOrEmpty(context.Request["limit"]))
{
limit = int.Parse(context.Request["limit"]);
}
if (!string.IsNullOrEmpty(context.Request["sort"]))
{
sort = context.Request["sort"];
}
if (!string.IsNullOrEmpty(context.Request["dir"]))
{
dir = context.Request["dir"];
}
if (!string.IsNullOrEmpty(context.Request["query"]))
{
query = context.Request["query"];
}
UserMaster objusers = new UserMaster();
//List<UserMaster> UserList = user.SelectUserFilter(query);
//context.Response.Write(JSON.Serialize(UserList));
Paging<UserMaster> users = objusers.SelectUserFilter(start, limit,query);
context.Response.Write(string.Format("{{total:{1},'users':{0}}}", JSON.Serialize(users.Data),users.TotalRecords));
}
public bool IsReusable
{
get
{
return false;
}
}
LiveSearch.aspx
<!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 id="Head1" runat="server">
<title>Untitled Page</title>
<style type="text/css">
.search-item {
font : normal 11px tahoma, arial, helvetica, sans-serif;
padding : 3px 10px 3px 10px;
border : 1px solid #fff;
border-bottom : 1px solid #eeeeee;
white-space : normal;
color : #555;
}
.search-item h3 {
display : block;
font : inherit;
font-weight : bold;
color : #222;
}
.search-item h3 span {
float : right;
font-weight : normal;
margin : 0 0 5px 5px;
width : 100px;
display : block;
clear : none;
}
p { width: 650px; }
.ext-ie .x-form-text { position : static !important; }
</style>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>Combo with Templates and Ajax</h1><br />
<p>This is a more advanced example demonstrating how to combine Store Paging and a Template to create "live search" functionality.</p>
<div style="width:600px;">
<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>
<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc">
<h3 style="margin-bottom:5px;">Search the plants</h3>
<ext:ComboBox ID="ComboBox1"
runat="server"
DisplayField="UserName"
ValueField="UserId"
TypeAhead="false"
LoadingText="Searching..."
Width="570"
PageSize="10"
HideTrigger="true"
ItemSelector="div.search-item"
MinChars="1">
<Store>
<ext:Store runat="server" ID="UserStore">
<Proxy>
<ext:HttpProxy Method="POST" Url="LiveSearchHandler.ashx" />
</Proxy>
<Reader>
<ext:JsonReader IDProperty="UserId">
<Fields>
<ext:RecordField Name="UserId"/>
<ext:RecordField Name="UserName"/>
<ext:RecordField Name="UserGroupName" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<Template ID="Template1" runat="server">
<Html>
<tpl for=".">
<div class="search-item">
<h3><span>{UserName}</span>{UserName}</h3>
{UserName}
</div>
</tpl>
</Html>
</Template>
</ext:ComboBox>
<div style="padding-top:4px;">
Plants search (type '*' (asterisk) for showing all)
</div>
</div></div></div>
<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>
</div>
</form>
</body>
</html>
UserMaster.cs public Paging<UserMaster> SelectUserFilter(int start, int limit, string filter)
{
List<UserMaster> users = Data.UserMasters.ToList();
if (!string.IsNullOrEmpty(filter) && filter != "*")
{
users.RemoveAll(UserMaster => !UserMaster.UserName.ToLower().StartsWith(filter.ToLower()));
// plants.RemoveAll(plant => !plant.Common.ToLower().StartsWith(filter.ToLower()));
}
if ((start + limit) > users.Count)
{
limit = users.Count - start;
}
List<UserMaster> rangePlants = (start < 0 || limit < 0) ? users : users.GetRange(start, limit);
return new Paging<UserMaster>(rangePlants,users.Count);
}
Last edited by Vaishali; Apr 02, 2012 at 8:48 AM.