Live search

  1. #1

    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.
  2. #2
    I want something like in below link

    https://examples1.ext.net/#/Form/Com...Custom_Search/


    but getting an error..
    Exception of type 'System.OutOfMemoryException' was thrown.

    At line
    context.Response.Write(string.Format("{{total:{1}, 'users':{0}}}", JSON.Serialize(users.Data),users.TotalRecords)); (LiveSearch.ashx)
  3. #3
    My first guess is you are returning a very large data set and/or when the User class is Serialized a lot of information (properties) are serialized. Try limiting the results.

    You should be able to inspect the return response using a tool such as Firefox + Firebug, or Fiddler.

    Hope this helps.
    Geoffrey McGill
    Founder
  4. #4
    Hi,

    But it fetch only 3 records and every rows contain 10 - 15 columns..

Similar Threads

  1. Live search
    By Yannis in forum 1.x Help
    Replies: 3
    Last Post: Jan 14, 2010, 12:22 AM
  2. Combobox live search
    By Yannis in forum 1.x Help
    Replies: 0
    Last Post: Dec 09, 2009, 10:19 AM
  3. live search
    By olimpia in forum 1.x Help
    Replies: 0
    Last Post: Jun 29, 2009, 5:44 PM
  4. Default value in "search live"
    By Kaido in forum 1.x Help
    Replies: 1
    Last Post: Apr 30, 2009, 7:59 AM
  5. "Live Search" sql example
    By jmilton in forum 1.x Help
    Replies: 4
    Last Post: Apr 06, 2009, 12:14 PM

Posting Permissions