AJAX AutoComplete Control Extender

Updated on 18 Apr 2012,
Published on 03 Jun 2008

Introduction 

The AutoComplete Extender control of AJAX Controls Toolkit can be used with Textbox server control in ASP.Net 2.0. AutoCompleteExtender control provides the functionality of cascading dropdown list box that displays the list of items retrieved through the web service attached with the extender. AutoComplete extender control passes the prefix text to the web service that can be sued to retrieve the items starting with the specified letters.

AutoComplete extender picks the content typed in the associated Textbox and passes it to the web service to perform the action.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

There are some properties of AutoCompleteExtender control that handles the working of extender. AutoComplete control uses its minimum prefix length property to limit the minimum number of characters typed into the attached textbox. When user enters the characters more than the specified limit then the AutoCompleteExtender generates the list below the textbox control.

You can also enable the caching to reduce the web service calls for similar queries. There is also an option to set the number of items to be returned from the result of web service.

AutoCompleteExtender Properties

TargetControlID: ID of the Textbox control to associate it with AutoComplete Extender.

CompletionInterval: Time interval in milliseconds after which it will display the retrieved results.

CompletionSetCount: Number of items to be returned from the web service.

MinimumPrefixLength: Number of characters required to initiate the web service request.

DelimiterCharacters: Delimiter characters that can be used to separate the items in textbox. You can specify the different characters like comma, space or semi-colon. Just select the one item first time and then type separator in the textbox you will get another set of results.

FirstRowSelected: You can set that the first item of the retrieved results will be selected by default.

EnableCaching: Caching can be enabled to reduce the web service calls for the similar queries.

ServicePath: Path of the web service that will be used with AutoCompleteExtender control.

ServiceMethod: Web service method name that will return the desired result array.

CompletionListCssClass: CSS Class to change the style of dropdown that will display the generated list of results.

CompletionListItemCssClass: CSS class to change the style of list item of retrieved results.

CompletionListHighlightedItemCssClass: CSS Class to change the style of the highlighted item of the list generated by the retrieved results.

Sample Code for AutoCompleteExtender Control

CSS Code
body {
    font-family: verdana;
    font-size: 11px;
}

.completionList {
    border: solid 1px #444444;
    margin: 0px;
    padding: 2px;
    height: 100px;
    overflow: auto;
}

.listItem {
    color: #666666;
}

.itemHighlighted {
    background-color: #ffc0c0;
}
HTML code
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

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

<ajaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1"
     runat="server"
     TargetControlID="TextBox1"
     CompletionInterval="1000"
     CompletionSetCount="20"
     UseContextKey="false"
     MinimumPrefixLength="1"
     ServiceMethod="getAutoList"
     DelimiterCharacters="; ,"
     ServicePath="AutoCompleteService.asmx"
     EnableCaching="true"
     FirstRowSelected="true"
     CompletionListCssClass="completionList"
     CompletionListHighlightedItemCssClass="itemHighlighted"
     CompletionListItemCssClass="listItem">
</ajaxToolkit:AutoCompleteExtender>

Web Service for AutoCompleteExtender Control

Remember that you can use any name for the web method in associated web service but you have to use the same name and case for the return type and method parameters.

Following sample code shows how to retrieve the results from the Northwind data.

[WebMethod]
public string[] getAutoList(string prefixText, int count)
{
    List<string> autoList = new List<string>(count);
    if (!prefixText.StartsWith("%"))
    {
        SqlConnection sqlConn = new SqlConnection(conString);

        sqlConn.Open();

        SqlCommand sqlSelect = new SqlCommand(
            "select top " + count + " productname from products
            where productname like @prefixText", sqlConn);

        sqlSelect.CommandType = System.Data.CommandType.Text;

        sqlSelect.Parameters.Add("@prefixText", System.Data.SqlDbType.VarChar).Value = prefixText + "%";

        SqlDataReader sqlRead = sqlSelect.ExecuteReader(System.Data.CommandBehavior.CloseConnection);

        while (sqlRead.Read())
        {
            autoList.Add(sqlRead["productname"].ToString());
        }

        return autoList.ToArray();
    }
    else
    {
        return new string[0];
    }
}

Use [System.Web.Script.Services.ScriptService()]at the top to allow the access of web service method in AutoCompleteExtender Control.

You can also specify the string contextKey parameter in the web method as:

public string[] getAutoList(string prefixText, int count, string contextKey)

You can use the contextKey property of the AutoComplete Extender control to return the result based on the context key name by the associated Textbox control. Context key property is helpful when you are using the same web method to display the auto complete list for different textbox control.

Output:

You can see the output of above discussed code from the following link:

AJAX AutoComplete Control

See also: Using AJAX AutoComplete Extender 3.5 SP1 in ASP.Net 2.0

Continue to next tutorial: AJAX Control Toolkit Calendar Extender to learn the functionality of Calendar control of AJAX control toolkit.

4 Responses to "AJAX AutoComplete Control Extender"
Arvind Yadav
It was a nice article.
Jeff
It's not working for me. It is connecting to the database and returning the correct results when I debug it, but I'm not getting suggestions or dropdown list for the text box. What am I doing wrong? Thanks
Obunturere
This is one one the most self explanatory articles about AJAX . in my opinion its better than microsoft's so its a shame its not working for you. Take your time and readcarefully !! Everything in in there. I am a novice and this site saved me at my near job
Shailesh Bhute
yes, its really works thanks for code...
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email