Post
Ask Question

Use Auto Complete Extender in ASP.Net

We use a TextBox and an Ajax auto complete extender and provide a target control id to the TextBox so that when you write something in that TextBox, it will provide you the dropdown type list to that specific word that you text in that TextBox. For example I have Name field in my table and depending on that I insert the Name data. Now when you start writing in that TextBox, like Ni… , it will automatically suggest for you the nearby name, like Nilesh, Nilu or Nilurima (based on the data that you saved in the database).

Initial Chamber

Step 1

Open your Visual Studio 2010 and create an Empty Website, provide a suitable name (Autocomplete_demo).

Step 2

In Solution Explorer you get your empty website, then add two web forms and a SQL Server Database as in the following.

For Web Form:

Autocomplete_demo (your empty website) then right-click then select Add New Item -> Web Form. Name it Autocomplete_demo.aspx.

For SQL Server database:

Autocomplete_demo (your empty website) then right-click then select Add New Item -> SQL Server Database. (Add a database inside the App_Data_folder).

DATABASE CHAMBER

Step 3

In Server Explorer, click on your database (Database.mdf) then select Tables -> Add New Table. Make the table like this.

Table tbl_data (Don't forget to make the ID as IS Identity -- True)

table design

table

That is the data I saved in the database, based on that the auto complete extender works.

Design Chamber

Step 4

Open you Autocomplete_demo.aspx file and write some code for designing our application.

Autocomplete_demo.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
  2.   
  3. <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>  
  4.   
  5. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  6.   
  7. <html xmlns="http://www.w3.org/1999/xhtml">  
  8. <head runat="server">  
  9.     <title></title>  
  10.     <style type="text/css">  
  11.   
  12.         .style1  
  13.         {  
  14.             width: 81px;  
  15.         }  
  16.         .style2  
  17.         {  
  18.             width: 416px;  
  19.         }  
  20.         .style3  
  21.         {  
  22.             width: 416px;  
  23.             font-weight: bold;  
  24.             text-decoration: underline;  
  25.             font-size: medium;  
  26.         }  
  27.         .style4  
  28.         {  
  29.             width: 81px;  
  30.             font-weight: bold;  
  31.             text-decoration: underline;  
  32.             font-size: medium;  
  33.         }  
  34.     </style>  
  35. </head>  
  36. <body>  
  37.     <form id="form1" runat="server">  
  38.     <div><asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
  39.     </asp:ToolkitScriptManager></div>  
  40.         <table style="width:100%;">  
  41.             <tr>  
  42.                 <td class="style4">  
  43.                     </td>  
  44.                 <td class="style3">  
  45.                     AutoComplete TextBox using Ajax AutoCompleteExtender</td>  
  46.                 <td>  
  47.                      </td>  
  48.             </tr>  
  49.             <tr>  
  50.                 <td class="style1">  
  51.                      </td>  
  52.                 <td class="style2">  
  53.                      </td>  
  54.                 <td>  
  55.                      </td>  
  56.             </tr>  
  57.             <tr>  
  58.                 <td class="style1">  
  59.                      </td>  
  60.                 <td class="style2">  
  61.   
  62.                     <asp:Label ID="Label1" runat="server" ForeColor="#6666FF"   
  63.                         style="font-weight: 700" Text="Search Your Name here"></asp:Label>  
  64.   
  65.                 </td>  
  66.                 <td>  
  67.                </td>  
  68.             </tr>  
  69.             <tr>  
  70.                 <td class="style1">  
  71.                      </td>  
  72.                 <td class="style2">  
  73.   
  74.                      </td>  
  75.                 <td>  
  76.                      </td>  
  77.             </tr>  
  78.             <tr>  
  79.                 <td class="style1">  
  80.                      </td>  
  81.                 <td class="style2">  
  82.   
  83.     <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>  
  84.   
  85.     <asp:AutoCompleteExtender ID="AutoCompleteExtender1" ServiceMethod="getdata" TargetControlID="TextBox1" EnableCaching="true" CompletionInterval="1000" MinimumPrefixLength="1" CompletionSetCount="1" runat="server">  
  86.     </asp:AutoCompleteExtender>  
  87.   
  88.                 </td>  
  89.                 <td>  
  90.   
  91.                 </td>  
  92.             </tr>  
  93.         </table>  
  94.       
  95.     </form>  
  96. </body>  
  97. </html>  
Here I use some properties of the AutoComplete Extender:
  1. TargetControl ID: This describes the target to which we want to apply the auto complete, in our case it is TextBox, therefore- “TextBox1”.
  2. Service Method: Here in this property it will call the web service that we had included in the .cs file.
  3. Completion Interval: It shows the time gap between when you write in the TextBox and the suggestion is shown.
  4. Minimum Prefix Length: It shows the character count, after how many characters the auto complete extender will start giving you the suggestions.

Your design looks as in the following:

design look

Code Chamber

Step 5

In the Code Chamber we will write some code so that our application works.

Autocomplete_demo.aspx.cs

  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. using System.Configuration;  
  10. using System.Web.Services;  
  11.   
  12. public partial class _Default : System.Web.UI.Page  
  13. {  
  14.     protected void Page_Load(object sender, EventArgs e)  
  15.     {  
  16.          
  17.     }  
  18.   
  19.       
  20.     [System.Web.Script.Services.ScriptMethod()]   
  21.     [System.Web.Services.WebMethod()]  
  22.   
  23.     public static List<string> getdata(string prefixText)  
  24.     {  
  25.         SqlConnection con = new SqlConnection(@"Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|\Database.mdf;Integrated Security=True;User Instance=True");  
  26.         con.Open();  
  27.         SqlCommand cmd = new SqlCommand("select * from tbl_data where name like @name+'%'", con);  
  28.         cmd.Parameters.AddWithValue("@name",prefixText);  
  29.         //cmd.Parameters.AddWithValue("@city",);  
  30.         SqlDataAdapter sda = new SqlDataAdapter(cmd);  
  31.         DataTable dt = new DataTable();  
  32.         sda.Fill(dt);  
  33.         List<string> name = new List<string>();  
  34.         
  35.         for (int i = 0; i < dt.Rows.Count; i++)  
  36.         {  
  37.             name.Add(dt.Rows[i][1].ToString());       
  38.         }  
  39.         return name;  
  40.       
  41.       
  42.       
  43.     }  
  44.   
  45.      
  46. }  
Output Chamber

Output

I hope you like this. Have a good day. Thank you for reading.


Similar Articles