The Microsoft Patterns & Practices Team has released the Contextual Autocomplete Guidance Bundle, which contains guidance on enhancing the UI responsiveness of your ASP.NET Web Applications utilizing ASP.NET AJAX to provide Contextual Autocomplete functionality. This guidance is applicable for both WCSF and standard ASP.NET non-WCSF based solutions. The bundle includes a new ContextSensitiveAutoCompleteExtender Control that greatly simplifies the development experience.
The Contextual Autocomplete Guidance Bundle includes a sample application that shows off the functionality, but I created a similar example from scratch to see just how easy it is to add the functionality. The only pieces I borrowed from the quickstart were the theme and master page just to keep a similar look and feel.
Below are the results of my endeavors that shows the context sensitive autocomplete functionality working against the Northwind Database. One chooses a category and then types in a few characters to find a product in that category:
The ContextSensitiveAutoCompleteExtender Control properties look like the following:
<asp:TextBox ID="ProductTextBox" runat="server" Width="320px" />
<ajaxtoolkitwcsfextensions:ContextSensitiveAutoCompleteExtender
ID="ProductAutoComplete"
runat="server"
TargetControlID="ProductTextBox"
CompletionSetCount="30"
CompletionInterval="400"
MinimumPrefixLength="1"
ServiceMethod="GetProducts"
ServicePath="ProductCatalogServices.asmx">
<CompletionContextItems>
<ajaxtoolkitwcsfextensions:CompletionContextItem
Key="Category"
ControlId="CategoryDropDown" />
</CompletionContextItems>
</ajaxtoolkitwcsfextensions:ContextSensitiveAutoCompleteExtender>
The GetProducts WebMethod in the ProductCatalogServices Web Service looks like the following:
[WebMethod]
public string[] GetProducts(string prefixText, int count,
Dictionary<string, string> contextValues)
{
int categoryId = Int32.Parse(contextValues["Category"]);
IProductRepository repository = RepositoryFactory.Create<IProductRepository>();
return repository.FindProductsInCategory(categoryId, prefixText, count);
}
Fiddler shows you just how responsive the UI can be with the nice autocomplete functionality:
In the end, the example was extremely easy to create using the new ContextSensitiveAutoCompleteExtender Control! Great Job! For more information on the Contextual Autocomplete Guidance Bundle, check out the CodePlex Wiki.