AutoCompleteExtender in ASP.Net

In this article you will learn about AutoCompleteExtender in ASP.NET.

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" %>  
  2.   
  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;  
  9.   
  10.   
  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.     {  
  19.   
  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.