Introduction

This article explains how to implement an auto-complete text box in ASP.NET using jQuery.
The following is my Data Table from which I am showing Employee Name:
design view
Image 1
The records in my Data Table are shown below.
Here I will show Employee Name in the autocomplete text box.
employee name
Image 2
Now my aspx code is:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6. <title>AutoComplete Text Box using jQuery in ASP.NET</title>
  7. <link href="jquery-ui.css" rel="stylesheet" type="text/css" />
  8. <script src="jquery.min.js" type="text/javascript"></script>
  9. <script src="jquery-ui.min.js" type="text/javascript"></script>
  11. <script type="text/javascript">
  12. $(document).ready(function() {
  13. SearchText();
  14. });
  15. function SearchText() {
  16. $("#txtEmpName").autocomplete({
  17. source: function(request, response) {
  18. $.ajax({
  19. type: "POST",
  20. contentType: "application/json; charset=utf-8",
  21. url: "Default.aspx/GetEmployeeName",
  22. data: "{'empName':'" + document.getElementById('txtEmpName').value + "'}",
  23. dataType: "json",
  24. success: function(data) {
  25. response(data.d);
  26. },
  27. error: function(result) {
  28. alert("No Match");
  29. }
  30. });
  31. }
  32. });
  33. }
  34. </script>
  36. </head>
  37. <body>
  38. <form id="form1" runat="server">
  39. <table cellpadding="10" cellspacing="10" style="border: solid 15px Green; background-color: SkyBlue;"
  40. width="50%" align="center">
  41. <tr>
  42. <td>
  43. <span style="color: Red; font-weight: bold; font-size: 18pt;">Enter Employee Name:</span>
  44. <asp:TextBox ID="txtEmpName" runat="server" Width="160px" />
  45. </td>
  46. </tr>
  47. </table>
  48. </form>
  49. </body>
  50. </html>
Now my aspx.cs code is:
  1. using System;
  2. using System.Configuration;
  3. using System.Data;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Security;
  7. using System.Web.UI;
  8. using System.Web.UI.HtmlControls;
  9. using System.Web.UI.WebControls;
  10. using System.Web.UI.WebControls.WebParts;
  11. using System.Xml.Linq;
  12. using System.Web.Services;
  13. using System.Data.SqlClient;
  14. using System.Collections.Generic;
  16. public partial class _Default : System.Web.UI.Page
  17. {
  18. protected void Page_Load(object sender, EventArgs e)
  19. {
  21. }
  23. [WebMethod]
  24. public static List<string> GetEmployeeName(string empName)
  25. {
  26. List<string> empResult = new List<string>();
  27. using (SqlConnection con = new SqlConnection(@"Data Source=SARSHA\SqlServer2k8;Integrated Security=true;Initial Catalog=Test"))
  28. {
  29. using (SqlCommand cmd = new SqlCommand())
  30. {
  31. cmd.CommandText = "select Top 10 EmployeeName from Employee where EmployeeName LIKE ''+@SearchEmpName+'%'";
  32. cmd.Connection = con;
  33. con.Open();
  34. cmd.Parameters.AddWithValue("@SearchEmpName", empName);
  35. SqlDataReader dr = cmd.ExecuteReader();
  36. while (dr.Read())
  37. {
  38. empResult.Add(dr["EmployeeName"].ToString());
  39. }
  40. con.Close();
  41. return empResult;
  42. }
  43. }
  44. }
  45. }
Now Run the Application
Here type some letter and see the Employee Name List:
enter employee name
Image 3
output
Image 4