ASP.NET

Creating AutoComplete Extender using ASP.NET

Background
 
Many times there is need to some suggested text when we are searching particular text from huge Records,so this type of requirement we can achieve by using the Ajax Control toolkit Auto Complete extender. So let us implement this requirement step by step as

What is the AutoComplete Extender ?

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 words that begin with the prefix typed into the textbox. The dropdown with candidate words supplied by a web service is positioned on the bottom left of the text box.

Step 1: Create Table using given script as
  1. CREATE TABLE [dbo].[Countries](  
  2.     [CountryId] [int] IDENTITY(1,1) NOT NULL,  
  3.     [CountryName] [varchar](50) NULL,  
  4.  CONSTRAINT [PK_Countries] PRIMARY KEY CLUSTERED   
  5. (  
  6.     [CountryId] ASC  
  7. )WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]  
  8. ) ON [PRIMARY]  
  9.   
 Insert some records into a table like as follows:
 
  
 
Step 2: Create web Application as:
  1. "Start" - "All Programs" - "Microsoft Visual Studio 2010".

  2. "File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).

  3. Provide the web site a name such as "Autocomplete" or another as you wish and specify the location.

  4. Then right-click on Solution Explorer - "Add New Item" - Add Web Form.

  5. Drag and drop one  textBoxes onto the <form> section of the Default.aspx page.

  6. Add AutoCompleteExtender from ToolBox

  7. Now the default.aspx page source code will look such as follows.
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  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: #0000FF">  
  10.     <form id="form1" runat="server">  
  11.     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">  
  12.   
  13.     </asp:ScriptManager>  
  14.     <table style="margin-top:40px;color:White">  
  15.         <tr>  
  16.             <td>  
  17.                 Search County  
  18.             </td>  
  19.             <td>  
  20.                 <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  21.                 <asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1"  
  22.                     CompletionInterval="10" EnableCaching="false" CompletionSetCount="1" TargetControlID="TextBox1"  
  23.                     ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">  
  24.                 </asp:AutoCompleteExtender>  
  25.             </td>  
  26.         </tr>  
  27.     </table>  
  28.     </form>  
  29. </body>  
  30. </html> 
 Step 3: Define connection string in Web.config file as:
  1. <connectionStrings>  
  2.   
  3.     <add name ="Conn" connectionString ="Data Source=VITHAL;Initial Catalog=C#corner;User Id=sa;word=swift"/> 
  4.   </connectionStrings> 
 Note: Please make changes in above connection string as per your server location.
 
 Step 4: Write Method in default.aspx.cs page to bind records from the database as:
  1.   [System.Web.Script.Services.ScriptMethod()]  
  2.   [System.Web.Services.WebMethod]  
  3.   public static List<string> GetCompletionList(string prefixText, int count)  
  4.   {  
  5.       using (SqlConnection con = new SqlConnection())  
  6.       {  
  7.           con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;  
  8.                    
  9.           using (SqlCommand com = new SqlCommand())  
  10.           {  
  11.               com.CommandText = "select CountryName from Countries where " + "CountryName like @Search + '%'";  
  12.                
  13.               com.Parameters.AddWithValue("@Search", prefixText);  
  14.               com.Connection = con;  
  15.               con.Open();  
  16.               List<string> countryNames = new List<string>();  
  17.               using (SqlDataReader sdr = com.ExecuteReader())  
  18.               {  
  19.                   while (sdr.Read())  
  20.                   {  
  21.                       countryNames.Add(sdr["CountryName"].ToString());  
  22.                   }  
  23.               }  
  24.               con.Close();  
  25.               return countryNames;  
  26.               
  27.                
  28.           }  
  29.           
  30.       }  
  31.      
  32.   } 
 Step 5: configure AutoCompleteExtender as per service calling method and TargetTextBox as:
  1.    <asp:AutoCompleteExtender ServiceMethod="GetCompletionList"
  2.            MinimumPrefixLength="1"    
  3.            CompletionInterval="10"
  4.            EnableCaching="false"
  5.            CompletionSetCount="1"
  6.            TargetControlID="TextBox1"    
  7.            ID="AutoCompleteExtender1"
  8.            runat="server"
  9.            FirstRowSelected="false">    
  10.     </asp:AutoCompleteExtender>  
 Step 6: Run the application and give any input it will populate following list as:
 
 
 
In the above example, records are populated from the database which name starts from U character.
 
Note
  • For the detailed code, please download the sample Zip file.
  • Perform changes in Web.config file as per your server location.

  • You need to use the Ajax Control Toolkit library.

  • To download latest Ajax control toolkit, click here Ajax ContolToolkit Download
Summary

For  all the examples above, we have learned how to use the Ajax auto complete extender, I hope this article is useful for all readers. If you have a suggestion then please contact me.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs