AutoComplete

The AutoComplete QuickStart demonstrates how to use the ContextSensitiveAutcompleteExtender control to filter a list of suggested values based on contextual information.

Building and Running the QuickStart

The QuickStart ships as source code, which means you must compile it before running it. This QuickStart requires the following components to be installed:

• ASP.NET AJAX Control Toolkit 3.5 (Note: ACT 4.0 is not supported)
• Microsoft .NET Framework 3.5

The AutoCompleteQuickStart project must include a reference to the ASP.NET AJAX Control Toolkit assembly. The following procedure describes how to build and run the QuickStart.

To build and run the QuickStart

1. Download and extract source code.
2. Open the solution file AutoComplete.sln.
3. In the AutoCompleteQuickStart project, add a reference to the ASP.NET AJAX Control Toolkit 3.5.
4. On the Build menu, click Rebuild Solution.
5. Press F5 to run the QuickStart.

Walkthrough

Perform the following steps to see the context-sensitive AutoComplete behavior of the QuickStart.

To see the context-sensitive AutoComplete behavior

1. Run the QuickStart.
2. In the Zip Code text box, type 9. The list of suggestions includes all zip codes that begin with the number 9.
3. Clear the Zip Code text box.
4. In the State drop-down list box, select Washington.
5. In the City text box, type Re. The list of suggestions contains only the city names in the state of Washington that begin with “Re.”
6. In the list of suggestions, select Redmond.
7. In the Zip Code text box, type 9. The list of suggestions includes only the zip codes in Redmond, Washington, that begin with the number 9.

Acceptance Tests

The AutoComplete QuickStart solution includes a project named QuickStartAcceptanceTests, as illustrated in Figure 1. This project contains a set of documents that describe how the QuickStart should perform when you follow a series of steps. You can use the acceptance tests to explore the functional behavior of the AutoComplete QuickStart in a variety of scenarios.

Figure 12

AutoComplete QuickStart acceptance tests

Implementation Notes

This QuickStart highlights the code required to use the ContextSensitiveAutoCompleteExtender control. The key artifacts in the QuickStart are the following:

• Input Form Web page (AutoCompleteQuickStart\Default.aspx). This page contains an input form that uses ContextSensitiveAutoCompleteExtender controls to add auto complete capabilities to the City and Zip Code fields. Figure 2 illustrates the list of suggested cities for the selected state.

  

  Figure 13

  QuickStart page displaying a list of cities in the state of Washington that begin with “Re”

• Postal Code Auto Complete Web service (AutoCompleteQuickStart\PostalCodeAutocompleteService.asmx). This Web service provides the list of candidate words for the City and the Zip Code fields.

Input Form Web Page

The Input Form Web page (AutoCompleteQuickStart\Default.aspx) uses two ContextSensitiveAutoCompleteExtender controls, one for the CityTextBox text box and one for the PostalCodeTextBox text box. The following lines of code show the markup code for the latter control. Note that it specifies the following two context items:

• State. This takes its value from the StateDropDown control.
• City. This takes its value from the CityTextBox control.

<ajaxtoolkitwcsfextensions:ContextSensitiveAutoCompleteExtender
    ID="PostalCodeAutoComplete"
     
    TargetControlID="PostalCodeTextBox"
    CompletionSetCount="30" 
    CompletionInterval="400" 
    MinimumPrefixLength="1" 
    ServiceMethod="GetZipCodes"
    ServicePath="PostalCodeAutoCompleteService.asmx">
    <CompletionContextItems>
        <ajaxtoolkitwcsfextensions:CompletionContextItem Key="State" ControlId="StateDropDown" />
        <ajaxtoolkitwcsfextensions:CompletionContextItem Key="City" ControlId="CityTextBox" />
    </CompletionContextItems>
</ajaxtoolkitwcsfextensions:ContextSensitiveAutoCompleteExtender>

Here is an explanation of the attributes listed in the code example:

• TargetControlID. The control that is associated with the extender.
• CompletionSetCount. The maximum number of suggestions to retrieve from the Web service.
• CompletionInterval. The time in milliseconds that determines when the autocomplete capability will begin retrieving suggestions from the Web service.
• MinimumPrefixLength. The minimum number of characters that must be entered in the TargetControlID before getting suggestions from the Web service.
• ServiceMethod. The Web service method that is called once the MinimumPrefixLength condition is met.
• ServicePath. The path to the Web service that the extender uses to retrieve suggestions.
• CompletionContextItems. The collection of controls that supply context information.

Postal Code AutoComplete Web Service

The PostalCodeAutocomplete Web service’s signature has the [ScriptService] attribute applied to it. This attribute is required in Web services that interact with the ContextSensitiveAutoCompleteExtender control. The following code shows how to use this attribute.

[ScriptService]
public class PostalCodeAutocompleteService : System.Web.Services.WebService

The Web service contains two methods used for auto completion. They are named GetZipCodes and GetCities. These methods use a service named ZipLookupService to get the list of candidate words. The following code shows how to use these methods.

[WebMethod]
public string[] GetZipCodes(string prefixText, int count, Dictionary<string, string> contextValues)
{
    string state = contextValues["State"];
    string city = contextValues["City"];
    return ZipLookupService.GetZipCodes(prefixText, count, state, city);
}

[WebMethod]
public string[] GetCities(string prefixText, int count, Dictionary<string, string> contextValues)
{
    string state = contextValues["State"];
    return ZipLookupService.GetCities(prefixText, count, state);
}