Post
Ask Question

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.

 


Similar Articles