Saturday 4 May 2013

Autocomplete using asp.net Jquery Webservice calliing Core Ajax

.aspx

<%@ 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">
    <title>AutoComplete Box with jQuery</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
    <script type="text/javascript">
        $(function() {
            $(".txtAutosuggest").autocomplete({
                source: function(request, response) {
                    $.ajax({
                        url: "EmployeeList.asmx/GetEmailList",
                        data: "{ 'mail': '" + request.term + "' }",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function(data) { return data; },
                        success: function(data) {
                            response($.map(data.d, function(item) {
                                return {
                                    value: item.Email
                                }
                            }))
                        },
                        error: function(XMLHttpRequest, textStatus, errorThrown) {
                            alert(textStatus);
                        }
                    });
                },
                minLength: 2
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="demo">
        <div class="ui-widget">
            <label for="AutoSuggest">Enter Email: </label>
             <asp:TextBox ID="txtAutosuggest" class="tb" runat="server">
             </asp:TextBox>
        </div>
    </div>
    </form>
</body>
</html>

App_Code:-
Employee.cs
 using System.Collections.Generic;
/// <summary>
/// Summary description for Employee
/// </summary>
public class Employee
{
    public int ID { get; set; }
    public string Email { get; set; }

    public Employee()
    {
    }
    public List<Employee> GetEmployeeList()
    {
        List<Employee> empList = new List<Employee>();
        empList.Add(new Employee() { ID = 1, Email = "Pankaj@mymail.com" });
        empList.Add(new Employee() { ID = 2, Email = "akash@mymail.com" });
        empList.Add(new Employee() { ID = 3, Email = "Aaditya@mymail.com" });
        empList.Add(new Employee() { ID = 4, Email = "suresh@mymail.com" });
        empList.Add(new Employee() { ID = 5, Email = "suraj@mymail.com" });
     
        return empList;
    }

}

EmployeeList.cs:-//create WebMethod

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

[WebService(Namespace = "http://tempuri.org/")]
 
[ScriptService]
public class EmployeeList : System.Web.Services.WebService
{
[WebMethod]
public List<Employee> GetEmailList(string mail)
{
    var emp = new Employee();
    var getEmail = emp.GetEmployeeList()
    .Where(m => m.Email.ToLower().StartsWith(mail.ToLower()));
    return getEmail .ToList();
}   
}

 
Posted by at