Tuesday, 16 December 2014

JQuery AutoComplete TextBox with Asp.Net Webmethods

Introduction:

Today i will explain how to implement the autocomplete textbox using JQuery  in Asp.Net

Description:

JQuery autocomplete textbox using page methods, Added all Jquey references in my master page and in content page am accessing.


Here is the Jquey References added in master page.




<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700" rel="stylesheet" type="text/css" />

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<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/jqueryui/1.8.1/jquery-ui.min.js"></script>  

<title>JQuey autoComplete TextBox with Pagemethods in Asp.net C#</title>

</head>

In Content page




<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div style="padding-left: 10px; width: 777px;">
<asp:TextBox ID="txtEmpId" runat="server"  Width="260px" MaxLength="100"></asp:TextBox>
</div>
<script type="text/javascript">
        $(document).ready(function () {
            SearchText();
        });
        function SearchText() {
            $('[id$=txtEmpId]').autocomplete({
                source: function (request, response) {
                    $.ajax({
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        url: "EmployeeDetails.aspx/EmployeeDetails",
                        data: "{'empName':'" + document.getElementById("ContentPlaceHolder1_txtEmpId").value + "'}",
                        dataType: "json",
                        success: function (data) {
                            response(data.d);
                        },
                        error: function (result) {
                            alert("Error");
                        }
                    });
                }, select: function (event, ui) {
                    alert(ui.item.label);
                }
            });
        }
       </script>
</asp:Content>
 
C# Code:

In Code behind  We can access the page Methods, for  this am Using the WebMethod 




using System.Web.Services;
using System.Web.Script.Services;






  [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static List<string> EmployeeDetails(string empName)
        {
            List<string> empResult = new List<string>();
            DataLayer.DataAccess data = new DataLayer.DataAccess();
            data.ConnectionString = ConfigurationManager.ConnectionStrings["SqlServer"].ToString();

            using (SqlConnection con = new SqlConnection(data.ConnectionString))
            {
                using (SqlCommand cmd = new SqlCommand())
                {
                    cmd.CommandText = "select distinct Top 10 EmpId from EmployeeDetails where EmpId like '%'+@SearchEmpName+'%'";
                    cmd.Connection = con;
                    con.Open();
                    cmd.Parameters.AddWithValue("@SearchEmpName", empName);
                    SqlDataReader dr = cmd.ExecuteReader();
                    while (dr.Read())
                    {
                        empResult.Add(dr["EmpId"].ToString());
                    }
                    con.Close();
                    return empResult;
                }

            }
        }



OutPut: