jQuery Autocomplete and ASP.NET

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

  • 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
                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">
        <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">
                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;
                background: Window url('./indicator.gif') right center no-repeat;
                background-color: Highlight;
                color: HighlightText;
        <form id="form1" runat="server">
            <input type="text" id="country" name="country" />
    Click here for {{Demo}}

1 comment: