Creating AutoComplete Extender using ASP.NET

Vithal Wadje
Oct 30, 2014
235.2k
0
5
Article

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

CREATE TABLE [dbo].[Countries](
[CountryId] [int] IDENTITY(1,1) NOT NULL,
[CountryName] [varchar](50) NULL,
CONSTRAINT [PK_Countries] PRIMARY KEY CLUSTERED
(
[CountryId] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]

Insert some records into a table like as follows:

Step 2: Create web Application as:

"Start" - "All Programs" - "Microsoft Visual Studio 2010".
"File" - "New WebSite" - "C#" - "Empty WebSite" (to avoid adding a master page).
Provide the web site a name such as "Autocomplete" or another as you wish and specify the location.
Then right-click on Solution Explorer - "Add New Item" - Add Web Form.
Drag and drop one textBoxes onto the <form> section of the Default.aspx page.
Add AutoCompleteExtender from ToolBox
Now the default.aspx page source code will look such as follows.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body style="background-color: #0000FF">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods = "true">
</asp:ScriptManager>
<table style="margin-top:40px;color:White">
<tr>
<td>
Search County
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:AutoCompleteExtender ServiceMethod="GetCompletionList" MinimumPrefixLength="1"
CompletionInterval="10" EnableCaching="false" CompletionSetCount="1" TargetControlID="TextBox1"
ID="AutoCompleteExtender1" runat="server" FirstRowSelected="false">
</asp:AutoCompleteExtender>
</td>
</tr>
</table>
</form>
</body>
</html>

Step 3: Define connection string in Web.config file as:

<connectionStrings>
<add name ="Conn" connectionString ="Data Source=VITHAL;Initial Catalog=C#corner;User Id=sa;word=swift"/>
</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:

[System.Web.Script.Services.ScriptMethod()]
[System.Web.Services.WebMethod]
public static List<string> GetCompletionList(string prefixText, int count)
{
using (SqlConnection con = new SqlConnection())
{
con.ConnectionString = ConfigurationManager.ConnectionStrings["Conn"].ConnectionString;
using (SqlCommand com = new SqlCommand())
{
com.CommandText = "select CountryName from Countries where " + "CountryName like @Search + '%'";
com.Parameters.AddWithValue("@Search", prefixText);
com.Connection = con;
con.Open();
List<string> countryNames = new List<string>();
using (SqlDataReader sdr = com.ExecuteReader())
{
while (sdr.Read())
{
countryNames.Add(sdr["CountryName"].ToString());
}
}
con.Close();
return countryNames;
}
}
}

Step 5: configure AutoCompleteExtender as per service calling method and TargetTextBox as:

<asp:AutoCompleteExtender ServiceMethod="GetCompletionList"
MinimumPrefixLength="1"
CompletionInterval="10"
EnableCaching="false"
CompletionSetCount="1"
TargetControlID="TextBox1"
ID="AutoCompleteExtender1"
runat="server"
FirstRowSelected="false">
</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.