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:
