ASP.NET: Creating a Simple Auto-Complete TextBox

Resources: http://www.asp.net/ajaxlibrary/act_AutoComplete_Simple.ashx

Creating a Simple Auto-Complete TextBox

In this tutorial, you learn how to apply an AutoCompleteExtender control to a TextBox in order to display auto-complete suggestions as you type.

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.

To learn how to install the Ajax Control Toolkit, see the Ajax Control Toolkit page.

Add a ToolkitScriptManager

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 theAjax Control Toolkit tab under the Toolbox.

  1. <asp:ToolkitScriptManager ID=“ToolkitScriptManager1” runat=“server”>  
  2. </asp:ToolkitScriptManager>  

Add a TextBox Control

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:

  1. <asp:ToolkitScriptManager ID=“ToolkitScriptManager1” runat=“server”>  
  2. </asp:ToolkitScriptManager>  
  3.   
  4. <asp:TextBox ID=“txtMovie” runat=“server”></asp:TextBox>  

Add an AutoCompleteExtender

The next step is to apply an AutoCompleteExtender control to the TextBox. Add the following AutoCompleteExtender control to your page:

  1. <asp:ToolkitScriptManager ID=“ToolkitScriptManager1” runat=“server”>  
  2. </asp:ToolkitScriptManager>  
  3.   
  4. <asp:TextBox ID=“txtMovie” runat=“server”></asp:TextBox>  
  5.   
  6. <asp:AutoCompleteExtender   
  7.     ID=“AutoCompleteExtender1”   
  8.     TargetControlID=“txtMovie”   
  9.     runat=“server” />  

Add a Page Method

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.

Image

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:

VB

  1.   
  2. Public Shared Function GetCompletionList(ByVal prefixText As StringByVal count As IntegerByVal contextKey As StringAs String()  
  3.   Return Nothing  
  4. End Function  

C#

  1. [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]  
  2. public static string[] GetCompletionList(string prefixText, int count, string contextKey) {  
  3.     return default(string[]);  
  4. }  

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:

VB

  1.   
  2. Public Shared Function GetCompletionList(ByVal prefixText As StringByVal count As IntegerByVal contextKey As StringAs String()  
  3.     ‘ Create array of movies  
  4.     Dim movies() As String = {“Star Wars”“Star Trek”“Superman”“Memento”“Shrek”“Shrek II”}  
  5.   
  6.     ‘ Return matching movies  
  7.     Return (  
  8.         From m In movies  
  9.         Where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase)  
  10.         Select m).Take(count).ToArray()  
  11. End Function  

C#

  1. [System.Web.Services.WebMethodAttribute(), System.Web.Script.Services.ScriptMethodAttribute()]  
  2. public static string[] GetCompletionList(string prefixText, int count, string contextKey) {  
  3.     // Create array of movies  
  4.     string[] movies = {“Star Wars”“Star Trek”“Superman”“Memento”“Shrek”“Shrek II”};  
  5.   
  6.     // Return matching movies  
  7.     return (from m in movies where m.StartsWith(prefixText,StringComparison.CurrentCultureIgnoreCase) select m).Take(count).ToArray();  
  8. }  

The following TextBox illustrates how the AutoCompleteExtender works. Enter the text Star into the TextBox and you will get matching suggestions.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s