AutoComplete is an ASP.NET AJAX extender that can be attached to any TextBox control and will associate that control with a Popup panel to display a result returned from web services or retrieved from a database on the basis of text in a TextBox.

The Dropdown with name retrieved from the database or web service is positioned on the bottom-left of the TextBox.

Some Important properties of AutoCompleteExtender:

  • TargetControlID: The TextBox control Id where the user types text to be automatically completed.

  • EnableCaching: Whether client-side caching is enabled.

  • CompletionSetCount: Number of suggestions to be retrieved from the web service.

  • MinimumPrefixLength: Minimum number of characters that must be entered before getting suggestions from a web service.

  • CompletionInerval: Time in milliseconds when the timer will kick in to get a suggestion using the web service.

  • ServiceMethod: The web service method to be called.

  • FirstRowSelected: Whether the first row is selected from the suggestion.

Example

Step 1

First we need to create a table like the following:

  1. Create table Friend(
  2. iId int identity(1,1) primary key,
  3. nvName nvarchar(50)
  4. )
Step 2

table

Step 3

Create a website, then add a Web Form and copy the code.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Example.aspx.cs" Inherits="Example" %>
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7. <title></title>
  8. </head>
  9. <body style="background-color:lightgray">
  10. <form id="form1" runat="server">
  11. <div>
  12. <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
  13. </asp:ScriptManager>
  14. <asp:AutoCompleteExtender ServiceMethod="GetSearch" MinimumPrefixLength="1" CompletionInterval="10"
  15. EnableCaching="false" CompletionSetCount="10" TargetControlID="TextBox1" ID="AutoCompleteExtender1"
  16. runat="server" FirstRowSelected="false">
  17. </asp:AutoCompleteExtender>
  18. <asp:Label ID="Label1" runat="server" Text="Search Name"></asp:Label>
  19. <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
  20. </div>
  21. </form>
  22. </body>
  23. </html>
Step 4

Write the following code in the aspx.cs page:
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Data;
  8. using System.Data.SqlClient;
  11. public partial class Example : System.Web.UI.Page
  12. {
  13. static SqlConnection con = new SqlConnection("data source=.\\sqlexpress;
  14. initial catalog=example;integrated security=true;"); //Create a Sql connection
  15. static SqlDataAdapter da;
  16. static DataTable dt;
  17. protected void Page_Load(object sender, EventArgs e)
  18. {
  20. }
  21. [System.Web.Script.Services.ScriptMethod()]
  22. [System.Web.Services.WebMethod]
  23. public static List<string> GetSearch(string prefixText)
  24. {
  25. DataTable Result = new DataTable();
  26. string str = "select nvName from Friend where nvName like '" + prefixText + "%'";
  27. da = new SqlDataAdapter(str, con);
  28. dt = new DataTable();
  29. da.Fill(dt);
  30. List<string> Output = new List<string>();
  31. for (int i = 0; i < dt.Rows.Count; i++)
  32. Output.Add(dt.Rows[i][0].ToString());
  33. return Output;
  34. }
  35. }
Step 5

Now run the website and provide any input that will populate the following list:

Search

Note: You need to use the Ajax Control Toolkit library.