Skip to main content

Autocomplete using Jquery

aspdotnetcodebook
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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>

    <title></title>
    <style type="text/css">
        .listbox
        {
            position: relative;
            left: 10px;
            margin: 10px;
            width: 200px;
            background-color: #000;
            color: #fff;
            border: 2px solid #000;
        }
        .nameslist
        {
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        .hover
        {
            background-color: Teal;
            color: blue;
        }
    </style>

    <script type="text/javascript">
        $(document).ready(function() {
            $('.listbox').hide();
            $('#country').keyup(function() {
                var country = $('#country').val();
                $.ajax({
                    type: "POST",
                    url: "Default.aspx/User",
                    data: "{'country': '" + country + "'}",
                    dataType: "json",
                    contentType: "application/json",
                    success: function(html) {
                        $('.listbox').show();
                        $('.nameslist').html(html.d);
                        $('li').hover(function() {
                            $(this).addClass('hover');
                        }, function() {
                            $(this).removeClass('hover');
                        });
                        $('li').click(function() {
                            $('#country').val($(this).text());
                            $('.listbox').hide();
                        });
                    }
                });
                return false;
            });
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <span class="label">Enter Country Name</span>
    <input type="text" name="country" id="country" />
    <div class="listbox">
        <div class="nameslist">
        </div>
    </div>
    </form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    [System.Web.Services.WebMethod]
    public static string User(string country)
    {

        Country objCountry = new Country();
        var query = from p in objCountry.GetList()
                    where p.CountryName.ToLower().StartsWith(country.ToLower())
                    select p;
        StringBuilder sb = new StringBuilder();
        foreach (var item in query)
        {
            sb.Append("<li>" + item.CountryName + "</li>");

        }
        return sb.ToString();
    }

}

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


    public List<Country> GetList()
    {
        List<Country> list = new List<Country>()
        {
            new Country(){ID=1,CountryName="Inida"},
            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;
    }
}

Comments

  1. this is a very nice article ,
    but how could u implement autocomplete using jquery in "gridview" in C#.net with Sql server 2005 database

    ReplyDelete

Post a Comment

Popular posts from this blog