.aspx
<table>
<tr>
<td>Enter Employee Name <asp:TextBox runat="server" ID="txtname" CssClass="inputs" /> <b><span id="empval" style="color: red; font-family: Verdana; font-size: small" class="mytext"></span></b>
<asp:HiddenField ID="hdnempcd" runat="server" />
</td>
</tr>
</table>
.js
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"
rel="Stylesheet" type="text/css" />
<link href="StyleSheet.css" rel="stylesheet" />
<script>
$(function () {
$("#txtname").autocomplete({
source: function (request, response)
{
$.ajax({
url: '<%=ResolveUrl("~/Autocomplete.aspx/GetEmployees") %>',
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) {
$("[id$=empval]").text("Employee Code is : " + i.item.val);
$("[id$=hdnempcd]").val(i.item.val);
},
minLength: 1
});
})
</script>
[WebMethod]
public static string[] GetEmployees(string prefix)
{
List<string> customers = new List<string>();
using (SqlConnection conn = new SqlConnection())
{
conn.ConnectionString = ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString;
using (SqlCommand cmd = new SqlCommand())
{
cmd.CommandText = "select distinct fname, empcode from
company..employee where fname 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["fname"], sdr["empcode"]));
}
}
conn.Close();
}
}
return customers.ToArray();
}
.Css
.inputs {
background: #FFF url(http://html-generator.weebly.com/files/theme/input-text-9.png) no-repeat 4px 4px;
border: 1px solid #999;
outline:0;
padding-left: 25px;
height:25px;
width: 275px;
}
.mytext{
-moz-animation-duration: 200ms;
-moz-animation-name: blink;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-webkit-animation-duration: 200ms;
-webkit-animation-name: blink;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
animation-duration: 400ms;
animation-name: blink;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@-moz-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@-webkit-keyframes blink {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
