Creating AutoComplete Extender using ASP.NET

Vithal Wadje

5y333.3k22100Article

AJAXAjax AutocompleteAutoComplete ExtenderASP.NET AutoComplete Extender

22 Comments

Join the conversation! Your thoughts help the community grow.

Kinyanjui Kamau5y ago
Hmm, I type a few characters and the whole page freezes. Is am using Webforms with a master page.
- Vithal Wadje5y ago
  Might be your extender failed to load, can you cross verify once
Waqas Khan7y ago
Anyone help me
Waqas Khan7y ago
Hi, this is not working.
- Vithal Wadje7y ago
  What error are you getting
Rajneesh Chaubey8y ago
Hi Vithal, Nice Article. I have one question that we can attach both CountryName as well as ID. But on frontend when we write CountryName, ID should not be displayed? How can do that?
Mohammad MuneerAlam9y ago
It is giving me 500 internal server error in a content page.
Akshay Mahure11y ago
0x800a139e - JavaScript runtime error: Sys.ArgumentException: Cannot deserialize. The data does not correspond to valid JSON.
Akshay Mahure11y ago
it shows
Avinash Rao11y ago
not getting results.. can anyone help or guide to do it through MySQL DB using Stored Procedure instead of SQL Syntax
Vithal Wadje11y ago
No,but other way is nothing.Need to check alternative
kashish khanna11y ago
Is this the right way to hit databse again and again for suggestions ?
Vithal Wadje11y ago
use code as it is ,as shown in my article
Vithal Wadje11y ago
it will work in content page
- Raghava Reddy11y ago
  it is not working in content page also
Salma Swalahin11y ago
I am facing the problem again in another project ,i am tring to do this in master.master and default.How I do this ,plz Give some solutions....
Vithal Wadje11y ago
Textbox.Text.Trim();
nivas info11y ago
Hi.. It worked.. Thanks.. Please tell me how to remove the space between "Textbox" and "Autocomplete Box"?
- Raghava Reddy11y ago
  is it working...
Salma Swalahin11y ago
I am using this in my masterpage ,but its not working,please give some suggestions.
Vithal Wadje12y ago
download Ajax control Toolkit
Basavaraja Hariyavvanavar12y ago
I am having, if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.'); error but i dont know how to fix it. please help me

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.
1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
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">
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:

<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.