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
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
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.
/// Returns a list of suggestions.
/// <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>
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
Flow of Development
Typical flow of adding auto complete extender to a site:
Figure 3: Development flow chart for adding auto complete functionality
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
Finally, let’s discuss the typical properties you will change:
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.
A public method in the above web service class which matches the signature described above.
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.
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
Browser Detection from the Client-Side in ASP.NET AJAX