Home » Articles


Sponsored links

CodeDigest Navigation

Technology News
No News Feeds available at this time.

Community News
No News Feeds available at this time.
Introduction to AutoCompleteExtender in Asp.Net AjaxControlToolkit

By Suresh Kumar Goudampally
Posted On Feb 07,2011
Article Rating:
Be first to rate
this article.
No of Comments: 1
Category: ASP.Net AJAX
Print this article.

Introduction to AutoCompleteExtender in Asp.Net AjaxControlToolkit



AutoCompleteExtender is a control which is part of Asp.Net Ajaxtoolkit and can be attached to any textbox control. The AutoCompleteExtender displays the popup to show the words that start with typed words on the textbox. In this article I will be discussing about the main features of AutoComplete extender and how it works in conjunction with ScriptManager to achieve the intended functionality.

Sample Demonstrating the AutoCompleteExtender

Let’s say we have requirement where the user is registering for an online and event and he needs to enter his current designation, we need to display all the designations that are starting with typed words on the textbox in a popup panel below


1.      Drag a TextBox control and the AutoCompleteExtender control on to the WebForm. Assign to the TargetControlID of the AutoCompleteExtender to the ID of the Textbox. Also give the SeviceMethod and ServicePath required to fetch the values. The markup looks like this:

            <asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox>

        <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender2"

        BehaviorID="countries" TargetControlID="TextBox1"


        ServiceMethod="GetDesignations" MinimumPrefixLength="1"       



2.      Add a webservice to the project, let’s say Designations.asmx and write the webmethod which fetches the value from database.



        public string[] GetDesignations(string prefixText)


       SqlConnection con = new

       SqlConnection("server=local;integrated security=true;database=master");


       string strQuery = "select * from designations where designation like '" + prefixText + "%'";

            DataSet ds = new DataSet();

            SqlDataAdapter dta = new SqlDataAdapter(strQuery,con);



            List<string> desigsArList = new List<string>();

            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)




             return desigsArList.ToArray();           


3.      Assign the ScriptService attribute to the class WebService class we are using:



       public class Countries : System.Web.Services.WebService



4.      Now run the application and the output looks as given in the below screenshot when typed a single character

 Introduction to AutoCompleteExtender in Asp.Net AjaxControlToolkit


Displaying the popup without using the Webservice

We can also display completion list using AutoCompleteExtender control and without using WebServices in the following way:

1.      First enable the PageMethods for the scriptmanager. Check the sample markup below

         <ajaxToolkit:ToolkitScriptManager runat="server" EnablePageMethods="true" ID="ToolkitScriptManager1" />

2.      Now write the webmethod in the codebehind file as shown below:


        public static string[] GetCountriesList(string prefixText, int count)


            List<string> countriesArList = new List<string>();





            return countriesArList.ToArray();           


 //this is a sample method which fetches static values beginning with “I”

Make sure the method is a static method and follows all the rules required by AutoCompleteExtender.

3.      Just assign the WebMethod to the autocomplete extender as given below without using the service path.

       <ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1"

       BehaviorID="AutoCompleteEx" TargetControlID="TextBox2"

       ServiceMethod="GetCountriesList" MinimumPrefixLength="1"       

       runat="server" FirstRowSelected="true" >        



AutoCompleteExtender Important Properties

Ø       TargetControlID - The Id of Textbox control for which the user types the content and should be automatically completed.

Ø       ServiceMethod  - The webservice method that returns the required matching values.

Ø       Note: The webservice method should have the return type of string[], and the parameter name should be “prefixText”. We can also call the webmethod without parameters.

Ø       ServicePath – The path of the webservice where the control gets the data for completion. The ServiceMethod name which we give should be in the webservice path given.

Ø       Note: If the ServicePath is not given, the method should be a Web Method in the code behind files.

Ø       MinimumPrefixLength - Minimum number of characters that must be entered before getting suggestions from the web service.

Ø       CompletionInterval – This is used to set the time in milliseconds which is used to trigger the action of getting the values from server. That means specified time tap is maintained after user entering some text onto the textbox.

Ø       EnableCaching – Enables the client side caching when set to true.

Ø       CompletionSetCount – This indicates the number of suggestions needs to be fetched from the webmethod. This is passed as the parameter and based on the value the webmethod logic should retrieve the values.

Ø       To apply the styles for the items we use the following g

§          CompletionListCssClass – Applies style for the complete items list.

§          CompletionListItemCssClass – Applies styles for each item.

§          CompletionListHighlightedItemCssClass – Applies style for the highlighted item in the list

Ø       FirstRowSelected – Indicates that first row in the completion list should be selected automatically.

Ø       We can also apply animations to the completion list items displayed on the popup of AutoCompleteExtender.





                            <OpacityAction Opacity="0" />

                            <HideAction Visible="true" />                           

                            <ScriptAction Script="

                                // Cache the size and setup the initial size

                                var behavior = $find('AutoCompleteEx');

                                if (!behavior._height) {

                                    var target = behavior.get_completionList();

                                    behavior._height = target.offsetHeight - 2;

                           = '0px';

                                }" />                           

                            <Parallel Duration=".4">

                                <FadeIn />

                                <Length PropertyKey="height" StartValue="0" EndValueScript="$find('AutoCompleteEx')._height" />





                        <Parallel Duration=".4">

                            <FadeOut />

                            <Length PropertyKey="height" StartValueScript="$find('AutoCompleteEx')._height" EndValue="0" />




Here the “AutoCompleteEx” is the BehaviourID property of the AutoCompleteExtender control.





In this article we have a glimpse at AutoCompleteExtender introduction and its features with a simple sample. The AjaxToolKit provides this control making the developers work very easy and also provides with all the flexible features. Hope this article helps for the beginners. Happy Reading!!!


Similar Articles
You can contribute to CodeDiget.Com:
Donate to
Article Feedback
Good one!
very nice article and clearly explained.