Auto Complete Textbox with ItemId in asp.net C#
Auto Complete Textbox with ItemId in asp.net C#
Download References Js and .css form this link:-
https://drive.google.com/folderview?id=0B2VobjpburSGMmxJVXZUNlF5OWM&usp=sharing
.Aspx Page
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--<script type="text/javascript"
src="js/jquery.1.11.1.js"></script>--%>
<script src="Auto/jquery-1.10.0.min.js"></script>
<link href="Auto/jquery-ui.css" rel="stylesheet" />
<script src="Auto/jquery-ui.min.js"></script>
<script>
var TotalCount = 1;
$(function () {
$("[id$=txtSearch]").autocomplete({
source: function (request, response)
{
$.ajax({
url: '<%=ResolveUrl("AutoComplete.aspx/GetDetails") %>',
data: "{ 'prefix': '" +
request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label:
item.split('-')[0],
val:
item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
debugger;
alert(i.item.val);
},
minLength: 1
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtSearch" runat="server" placeholder="Location" Style="color: black" />
</div>
</form>
</body>
</html>
.CS Page
[WebMethod]
public static string[] GetDetails(string prefix)
{
SQLHelper sq=new SQLHelper ();
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select Area_ID, Area_name from area_master where
Area_name like @SearchText + '%'";
cmd.Parameters.AddWithValue("@SearchText",
prefix);
cmd.Connection = conn;
conn.Open();
using (SqlDataReader sdr =
cmd.ExecuteReader())
{
while (sdr.Read())
{
customers.Add(string.Format("{0}-{1}", sdr["Area_name"], sdr["Area_ID"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
It Will look like :-
Comments
Post a Comment