Your shopping cart is empty!
AutoComplete extends any ASP.NET TextBox control. It associates that control with a popup panel to display words that begin with the prefix that is entered into the text box. When the user has entered more characters than a specified minimum length, a popup displays words or phrases that start with that value. By default, the list of words is positioned at the bottom left side of the text box.
The candidate words that match the user input are supplied by a Web service. Caching is enabled, so if the same characters are entered multiple times, only one call is made to the Web service.
We'll create an auto-complete TextBox by following these steps (1) Add a ToolkitScriptManager (2) Add a TextBox control (3) Add an AutoCompleteExtender (4) Add a page method.
Before you can use any of the Ajax Control Toolkit controls in a page, you first need to add a ToolkitScriptManager to the page. You can drag the ToolkitScriptManager from the Visual Studio Toolbox window onto the page. The ToolkitScriptManager is located in the Ajax Control Toolkit tab under the Toolbox.
The AutoCompleteExtender works with a standard ASP.NET TextBox control. In Design view, drag a TextBox control from under the Standard tab in the Toolbox onto your page.
Next, change the ID of the TextBox control to txtMovie. You can change the ID in the Properties Window. The resulting source code looks like this:
The next step is to apply an AutoCompleteExtender control to the TextBox. Add the following AutoCompleteExtender control to your page:
The final step is to create a method that returns the auto-complete suggestions. You can return auto-complete suggestions from an ASMX Web service, a WCF Web service, or a static page method. We use a static page method.
The easiest way to add the static page method is to click on the Add AutoComplete page method smart tag option. Selecting this menu option will create a new page method named GetCompletionList:
Notice that this method is passed parameters which represent what the user has typed into the TextBox (prefixText) and the number of auto-complete suggestions to show (count).
The following GetCompletionList() method returns a matching movie from a list of movies: