Post
Ask Question

JQuery - Auto Complete Text Box In ASP.Net C#

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" %>  
  2.   
  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>  
  10.       
  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>  
  35.   
  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;  
  15.   
  16. public partial class _Default : System.Web.UI.Page  
  17. {  
  18.     protected void Page_Load(object sender, EventArgs e)  
  19.     {  
  20.   
  21.     }  
  22.   
  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


Similar Articles