AutoCompleteExtender

To make input more user-friendly, there is nothing better we can do than facilitating input with a list of candidate values. We see it on Google home page. Now ASP.Net AJAX has AutoCompleteExtender control to make the job a easy one.

To use the control, we need firstly register it with the page:

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>

Then we add the control instance to the page, it will dynamically generate a drop down list under the target text box and shows the candidate values.

<AjaxToolkit:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server"
TargetControlID="txtTransID"
ServiceMethod="GetTransIDList"
ServicePath="~/AjaxServices.asmx"
MinimumPrefixLength="1"
CompletionInterval="500"
EnableCaching="true"
CompletionSetCount="20"/>

Among other things, we noticed that the control uses a web service to get data dynamically. To make a web service available to AJAX, we also need to register the service with ScriptManager:

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference path="~/AjaxServices.asmx" />
</Services>
</asp:ScriptManager>

Now let's prepare a web service. e.g. Here is a .asmx file:
<%@ WebService Language="C#" CodeBehind="~/App_Code/AjaxServices.cs" Class="AjaxServices" %>

The backend code of the service looks like the following:

[WebService(Namespace = "http://rbccm.com.ca/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class AjaxServices : System.Web.Services.WebService
{
public AjaxServices()
{
//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
public string[] GetTransIDList(string prefixText, int count)
{
DataTable dt = DFR.Transit.SearchTransID(prefixText);
return GetArrayFromDataTable(dt, string.Empty, -1, -1);
}

Here arises a question: How AutoCompleteExtender knows the parameters of the web service method and what values to pass for them? It makes sense that the signature (parameter numbers and types, return type) of the web service method are predefined, meaning they are customized for this control, because AutoCompleteExtender is targeting a specific problem which is getting matched array of strings by giving a string pattern.

It is true. After google a bit, the web method's parameters have to the predefined type, order, event the case-sensitive names[1]. The return type has to be string[].

In addition, this control has a good feature - Caching, making it only one call for same prefix text, rather than a call each typing of the same prefix.

Following is a full demonstration of AutoCompleteExtender, [1] has a detailed explanation.

<ajaxToolkit:AutoCompleteExtender
runat="server"
ID="autoComplete1"
TargetControlID="myTextBox"
ServiceMethod="GetCompletionList"
ServicePath="AutoComplete.asmx"
MinimumPrefixLength="2"
CompletionInterval="1000"
EnableCaching="true"
CompletionSetCount="20"
CompletionListCssClass="autocomplete_completionListElement"
CompletionListItemCssClass="autocomplete_listItem"
CompletionListHighlightedItemCssClass="autocomplete_highlightedListItem"
DelimiterCharacters=";, :"
ShowOnlyCurrentWordInCompletionListItem="true">
<Animations>
<OnShow> ... </OnShow>
<OnHide> ... </OnHide>
</Animations>
</ajaxToolkit:AutoCompleteExtender>


Reference
1. http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/AutoComplete/AutoComplete.aspx