There are so many ways to create an Auto Complete TextBox in ASP.NET like using an Ajax AutoComplete Control with Web Service and WCF. But here we will see how to use jQuery UI autocomplete functionality in ASP.NET.

Pre-requisites

  1. Create the simple table tblEmp with Id and EmpName Field in SQL Server
  2. Download the Plugin in the local system or use the online plugin as in the following:

    http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js
    http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js
    http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css"

You can see here what can you do from the Jquery-ui plugin.

http://jqueryui.com

Now we will see the AutoComplete functionality of the jQuery UI. In this sample I will use the online plugin.

Step 1: Create the aspx page with TextBox control and the jQuery required plugin in the Head portion of the HTML.

Step 2: Write the jQuery UI auto complete jQuery syntax with Ajax web method as given below.

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AjaxTest.WebForm1" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <title></title>
  6. <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
  7. <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
  8. <link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
  9. <script type="text/javascript">
  10. $(function () {
  11. $("#txtEmpName").autocomplete({
  12. source: function (request, response) {
  13. var param = { empName: $('#txtEmpName').val() };
  14. $.ajax({
  15. url: "WebForm1.aspx/GetEmpNames",
  16. data: JSON.stringify(param),
  17. dataType: "json",
  18. type: "POST",
  19. contentType: "application/json; charset=utf-8",
  20. dataFilter: function (data) { return data; },
  21. success: function (data) {
  22. response($.map(data.d, function (item) {
  23. return {
  24. value: item
  25. }
  26. }))
  27. },
  28. error: function (XMLHttpRequest, textStatus, errorThrown) {
  29. var err = eval("(" + XMLHttpRequest.responseText + ")");
  30. alert(err.Message)
  31. // console.log("Ajax Error!");
  32. }
  33. });
  34. },
  35. minLength: 2 //This is the Char length of inputTextBox
  36. });
  37. });
  38. </script>
  39. </head>
  40. <body>
  41. <form id="form1" runat="server">
  42. <div>
  43. EmpName : <asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
  44. <br />
  45. <br />
  46. <br />
  47. </div>
  48. </form>
  50. </body>
  51. </html>

Step 3: Write the code in the code behind file using Webmethod like this:

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Data.SqlClient;
  4. using System.Web.Services;
  6. namespace AjaxTest
  7. {
  8. public partial class WebForm1 : System.Web.UI.Page
  9. {
  10. protected void Page_Load(object sender, EventArgs e)
  11. {
  12. }
  14. [WebMethod]
  15. public static List<string> GetEmpNames(string empName)
  16. {
  17. List<string> Emp = new List<string>();
  18. string query = string.Format("SELECT EmpName FROM tblEmp WHERE EmpName LIKE '%{0}%'", empName);
  19. using (SqlConnection con = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=Test;Integrated Security=True"))
  20. {
  21. using (SqlCommand cmd = new SqlCommand(query, con))
  22. {
  23. con.Open();
  24. SqlDataReader reader = cmd.ExecuteReader();
  25. while (reader.Read())
  26. {
  27. Emp.Add(reader.GetString(0));
  28. }
  29. }
  30. }
  31. return Emp;
  32. }
  33. }
  34. }

Summary

This article showed how to use a jQuery UI AutoComplete in ASP.NET using jQuery theme. Let me know if you have a better approach for this.