Skip to main content

jQuery Autocomplete and ASP.NET

In this post i am going to show how to use jquery Autocomplte plugin in asp.net.


aspdotnetcodebook
  • Open Microsoft Visual Studio .NET. In Visual C# .NET, create a new WebSite
  • Right click on new website and add a new class(DummyDAL.cs) in App_Code folder and copy the following code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

public class Country
{
    public int ID { get; set; }
    public string CountryName { get; set; }


    public System.Collections.Generic.List<Country> GetList()
    {
        System.Collections.Generic.List<Country> list = new System.Collections.Generic.List<Country>()
        {
            new Country(){ID=1,CountryName="Inida"},
            new Country(){ID=1,CountryName="Indonesia"},
            new Country(){ID=2,CountryName="USA"},
            new Country(){ID=3,CountryName="UK"},
            new Country(){ID=4,CountryName="Australia"},
            new Country(){ID=5,CountryName="Newzeland"}

        };
        return list;
    }
}





  •  Right click on website and add new Generic Handler named AutoComplete.ashx and add following code
     
    <%@ WebHandler Language="C#" Class="AutoComplte" %>
    
    using System;
    using System.Web;
    using System.Linq;
    using System.Linq.Expressions;
    
    public class AutoComplete : IHttpHandler
    {
    
        public void ProcessRequest(HttpContext context)
        {
            string param = HttpContext.Current.Request.Params["q"];
            Country objCountry = new Country();
            var query = from p in objCountry.GetList()
                        where p.CountryName.ToLower().StartsWith(param.ToLower())
                        select p;
            foreach (var item in query)
            {
                context.Response.Write(item.CountryName + Environment.NewLine);
    
            }
        }
    
        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    
    } 
     
    In this last add following code in Default.aspx(in my case autocomplete.aspx)
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AutoComplete.aspx.cs" Inherits="AutoComplete" %>
    
    <!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.3.2.js" type="text/javascript"></script>
    
        <script src="Scripts/jquery-autocomplete.js" type="text/javascript"></script>
    
        <style type="text/css">
            .ac_results
            {
                padding: 0px;
                border: 1px solid WindowFrame;
                background-color: Window;
                overflow: hidden;
            }
            .ac_results ul
            {
                width: 100%;
                list-style-position: outside;
                list-style: none;
                padding: 0;
                margin: 0;
            }
            .ac_results iframe
            {
                display: none; /*sorry for IE5*/
                display: /**/ block; /*sorry for IE5*/
                position: absolute;
                top: 0;
                left: 0;
                z-index: -1;
                filter: mask();
                width: 3000px;
                height: 3000px;
            }
            .ac_results li
            {
                margin: 0px;
                padding: 2px 5px;
                cursor: pointer;
                display: block;
                width: 100%;
                font: menu;
                font-size: 12px;
                overflow: hidden;
            }
            .ac_loading
            {
                background: Window url('./indicator.gif') right center no-repeat;
            }
            .ac_over
            {
                background-color: Highlight;
                color: HighlightText;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <h3>
                Country</h3>
            <input type="text" id="country" name="country" />
    
            <script>
                $("#country").autocomplete("AutoComplete.ashx");
            </script>
    
        </div>
        </form>
    </body>
    </html>
     
     
     
     
     
    Click here for {{Demo}}

Comments

Post a Comment

Popular posts from this blog