Here in this article I am going to explain how we can
implement Autocomplete text box in ASP.NET using jQuery.
Below is my Data Table from which I am showing Employee
Name:
Image 1.
Records in my Data Table are:
Here I will show Employee Name as autocomplete text box
Image 2.
Now my aspx code is:
<%@ Page
Language="C#"
AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_Default"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AutoComplete Text Box using jQuery in ASP.NET</title>
<link
href="jquery-ui.css"
rel="stylesheet"
type="text/css"
/>
<script
src="jquery.min.js"
type="text/javascript"></script>
<script
src="jquery-ui.min.js"
type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function() {
$("#txtEmpName").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Default.aspx/GetEmployeeName",
data: "{'empName':'" + document.getElementById('txtEmpName').value + "'}",
dataType: "json",
success: function(data) {
response(data.d);
},
error: function(result) {
alert("No Match");
}
});
}
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<table
cellpadding="10"
cellspacing="10"
style="border: solid 15px Green; background-color: SkyBlue;"
width="50%"
align="center">
<tr>
<td>
<span style="color: Red; font-weight: bold; font-size: 18pt;">Enter
Employee Name:</span>
<asp:TextBox ID="txtEmpName" runat="server" Width="160px" />
</td>
</tr>
</table>
</form>
</body>
</html>
Now my aspx.cs code is:
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using
System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Web.Services;
using System.Data.SqlClient;
using
System.Collections.Generic;
public partial
class _Default
: System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static
List<string>
GetEmployeeName(string empName)
{
List<string>
empResult = new List<string>();
using (SqlConnection
con = new SqlConnection(@"Data Source=MyPC\SqlServer2k8;Integrated
Security=true;Initial Catalog=Test"))
{
using
(SqlCommand cmd = new
SqlCommand())
{
cmd.CommandText = "select Top 10 EmployeeName from Employee where
EmployeeName LIKE ''+@SearchEmpName+'%'";
cmd.Connection = con;
con.Open();
cmd.Parameters.AddWithValue("@SearchEmpName", empName);
SqlDataReader
dr = cmd.ExecuteReader();
while
(dr.Read())
{
empResult.Add(dr["EmployeeName"].ToString());
}
con.Close();
return
empResult;
}
}
}
}
Now Run the Application:
Here type some letter and see Employee Name List:
Image 3.
Image 4.