AutoComplete Behavior | ContextSensitiveAutoCompleteExtender | Patterns related to autocomplete

AutoComplete QuickStart

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 ASP.NET AJAX Control Toolkit to be installed, and the AutoCompleteQuickStart project must include a reference to the toolkit.

To build and run the QuickStart
  1. Open the solution file AutoComplete.sln.
  2. In the AutoCompleteQuickStart project, add a reference to the ASP.NET AJAX Control Toolkit.
  3. On the Build menu, click Rebuild Solution.
  4. 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, click 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, click 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.
AutoCompleteQuickStartAcceptanceTests.png
Figure 1
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.
QuickStartPageDisplayingALlistOfCities.png
Figure 2
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. 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"
    runat="server" 
    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>

Postal Code AutoComplete Web Service

The Postal Code Auto Complete Web service’s signature has the [ScriptService] attribute applied. This attribute is required in Web services that interact with the ContextSensitiveAutoCompleteExtender control.

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

The Web service contains two methods used for auto completion, GetZipCodes and GetCities. These methods utilize a service named ZipLookupService to get the list of candidate words.

[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);
} 

AutoComplete Behavior | ContextSensitiveAutoCompleteExtender | Patterns related to autocomplete

Last edited Nov 8, 2007 at 12:38 PM by siacomuzzi, version 4

Comments

No comments yet.