Wednesday 19 November 2014

Bind data to autocomplete TextBox using jquery in asp.net

Code in Default.aspx
<body>
<form id="form1" runat="server">
<div>
Name:
<asp:TextBox ID="txtCity" runat="server"></asp:TextBox>
</div>
</form>
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#txtCity").autocomplete({
source: function (request, response) {
var param = { cityName: $('#txtCity').val() };
$.ajax({
url: "Default.aspx/GetEmployeeName",
data: JSON.stringify(param),
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
console.log(data);
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2//minLength as 2, it means when ever user enter 2 character in TextBox the                         AutoComplete method will fire and get its source data.
});
});
</script>
</body>

Code in Default.aspx.cs
[WebMethod]
public static List<string> GetEmployeeName(string cityName)
{
 List<string> empResult = new List<string>();
 using (SqlConnection con = new SqlConnection(@"Data Source=SHANKAR\SQL2008R2;Initial              Catalog=SMPL;Persist Security Info=True;User ID=sa;Password=********"))
{
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select EmployeeName from Employee where EmployeeName LIKE                         ''+@SearchEmpName+'%'";
cmd.Connection = con;
 con.Open();
cmd.Parameters.AddWithValue("@SearchEmpName", cityName);
SqlDataReader dr = cmd.ExecuteReader();
 while (dr.Read())
{
 empResult.Add(dr["EmployeeName"].ToString());
}
con.Close();
return empResult;
}
}
}