AJAX AutoComplete Control Extender

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.

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.

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.