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.
In Content page
C# Code:
In Code behind We can access the page Methods, for this am Using the WebMethod
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>
<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:
Thanks for this Tutorial..!!
ReplyDelete