{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
The structure and usage of AutoCompleteExtender control
Summary
This article looks at various aspects of autocompleteextender. The web service method that returns the matching results and various important properties of the control are also discussed.
 
Table of Contents

The Basics

The Whole Trip

Figure 1: Structure of AutoCompleteExtender Control

The Web Method

Figure 2: The web method that returns the matches

Flow of Development

Figure 3: Development flow chart for adding auto complete functionality

The Properties

ServicePath

ServiceMethod

MinimumPrefixLength

CompletionSetCount

Additional Related Articles

 

The Basics

The autocompleteextender is part of AjaxControlToolkit. You need to have the AjaxControlToolkit and MS AJAX installed on your development environment (and eventually on the production server) for this control to work.

The functionality of auto complete comes from the public class of this control AutoCompleteExtender. Like all these extender control classes, this class is derived from the base class ExtenderControlBase.

The basic premise of the auto complete functionality is that, as you type characters into a search type textbox, the matching terms are automatically displayed in a list below. For this to work, of course, the list has to be manageable and come back quickly from the server, as these results (for most part) have to come back from the server.

The Whole Trip

The way results are obtained in the AutoCompleteExtender control are via a web service. So, for the AutoCompleteExtender, you would write a web service (the one with the extension asmx with a ‘code behind’ in the App_Code directory)

In this web service, you will have one public web method – you can call it whatever you want, as long as the [webmethod] attribute is there (and it is publicly accessible and matches a signature).

Figure 1: Structure of AutoCompleteExtender Control

Structure of AutoCompleteExtender Control

The Web Method

Now let’s take a closer look at the web method that returns a list of matches:

Figure 2: The web method that returns the matches

The web method that returns the matches


You can call the web service method whatever you want; in the example below, it is called GetTagList. This method returns a list of tags when called.

/// <summary>
/// Returns a list of suggestions.
/// </summary>
/// <param name="prefixText">The suggestions will have this as prefix</param>
/// <param name="count">Number of suggestions</param>
/// <returns>A string array of suggestions</returns>
[WebMethod]
public string[] GetTagList(string prefixText, int count)

Two things to note here:

- The ServiceMethod property of your extender control is set to this
- The signature of the web method must match the above (returns a string array and takes in a string and count parameter)

The AutoCompleteExtender calls this web service method with the text that the user entered into the textbox along with the number of matches requested. You put this value at the design time in the CompletionSetCount (e.g. 5, 10, 12, 20, etc.)

The list of matches are returned as a string array. In .net programming, you typically go for the generic List<string> for the convenience it offers, instead of a string array. But, you can easily convert a List to array. For example:

List<String> tagList = new List<string>(count);

// Do whatever you need to do here to fill the list
// And then convert the list to array

return (tagList.ToArray());

Flow of Development

Typical flow of adding auto complete extender to a site:

Figure 3: Development flow chart for adding auto complete functionality

Structure of AutoCompleteExtender Control


The above flow diagram shows the typical steps you will follow in adding an auto complete extender to your site:

  • Create a web service for this auto completion functionality
  • Create a web method in that web service that generates the list of matches
  • Add a textbox and autocompleteextender control to the page; associate them
  • Set the properties; typically: ServicePath, ServiceMethod, MinimumPrefixLength, and CompletionSetCount

The Properties

Finally, let’s discuss the typical properties you will change:

ServicePath

The path of the web service that contains the web method that returns the matches to display under the textbox that the user is typing in. If you decided to add an asmx file (web service) in the current project, all you need here is the name of the asmx file (for example, SearchTags.asmx). Otherwise, you would need the path to get to that web service.

ServiceMethod

A public method in the above web service class which matches the signature described above.

MinimumPrefixLength

This is the number of characters that the user types before start fetching the results. The default minimum is 3 characters; but even trying to match after the first (1) or second (2) character might not be a bad idea – you would be able to respond to the user sooner. However, this would be expensive in terms of additional network activity and possible db queries.

One additional thing to note here is that, it’s up to you where this ‘prefix’ will be in the matched strings. It could be at the beginning or anywhere in the string. It’s up to you what results you send back.

CompletionSetCount

How many results (in a string array) do you want returned back to the client. Any number around 10 seems reasonable. Higher number (say 20-30) might mean awkwardly long length. The actual number of matches could be less than what you set here. For example, if this count is 10 and there are only 5 matches, the autocompleteextender will display only those 5 values.

Additional Related Articles

How does an MS AJAX extender control get initialized on the client side?(Analysis of AutoCompleteExtender placement on the page at runtime)

Using AutoCompleteExtender with results from database

Incorporating ASP.NET AJAX into existing Custom Controls and JavaScript files

Browser Detection from the Client-Side in ASP.NET AJAX

Bookmark and Share This

More Articles With Similar Tags
Google Suggest style autocomplete feature is readily available from the AutoCompleteExtender control from the AJAX Toolkit. This article shows how to use control with the data obtained from database.
About  Contact  Privacy Policy  Site Map