Browse DevX
Sign up for e-mail newsletters from DevX


Make Your AJAX Apps Wiser Using Auto-Complete Functionality in Atlas

The whole point of AJAX is to make things faster, so why not include functionality that completes your users' thoughts as they type? In Atlas you can easily implement auto-completion functionality using the AutoCompleteExtender control.




Building the Right Environment to Support AI, Machine Learning and Deep Learning

n my last article on Atlas, I gave you an introduction to the Atlas framework and showed you how to use the UpdatePanel control to update portions of pages without a server refresh. In this article, I'll drive your Atlas abilities even further by showing you how to use the AutoCompleteExtender control to help a user complete a TextBox entry by making suggestions.

Google Suggest is a good example of this type of functionality (see Figure 1). As you type into the search text box, Google dynamically offers suggestions based on what other users have searched for.

Creating an Atlas Web Site
The first project I'd like to share with you is a TextBox control that displays a list of matching country names as you type into it.

In Visual Studio 2005, create a new Atlas Web site project and name it C:\AutoCompete. In the Toolbox, verify if you have the AutoCompleteExtender control listed under the Atlas tab (see Figure 2).

Figure 1. The Google Suggest tool offers suggestions for search terms based on what other users have searched for.
Figure 2. The AutoCompleteExtender control in the Toolbox.

If you do not have the AutoCompleteExtender control, you can right-click on the Atlas tab in Toolbox and select Choose Items…. In the Choose Toolbox Items dialog, click on the Browse… button and select the Microsoft.Web.Atlas.dll library from C:\Program Files\Microsoft ASP.NET\Atlas\v2.0.50727\Atlas\ and click Open. Ensure that the AutoCompletExtender item is checked (see Figure 3) and then click OK. The AutoCompleteExtender control should now be listed in the Toolbox.

To use the AutoCompleteExtender control in your project, drag and drop it onto the Default.aspx page. You will be prompted with a dialog asking you if you want to replace the Microsoft.Web.Atlas.dll library in the Bin folder. Click No.

Once this is done, drag and drop a TextBox control onto the page and type in the string "Enter Country Name." The Default.aspx page now looks as shown in Figure 4.

Figure 3. Add the AutoCompleteExtender control to the Toolbox.
Figure 4. Populate the Default.aspx page.

Next, switch to Source View and configure the AutoCompleteExtender control. The AutoCompleteExtender control uses a Web service, which you will build in this article, to retrieve a list of values to auto-complete the control (such as a TextBox) associated with it. Hence, in the <atlas:AutoCompleteExtender> element, set the ServiceMethod attribute to "GetCountries" and the ServicePath attribute to "WebService.asmx." The ServicePath attribute identifies the name of the Web service (the name of the .asmx file) and the ServiceMethod indicates the Web method to use.

<form id="form1" runat="server"> <atlas:ScriptManager ID="ScriptManager1" runat="server" /> <div> <atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCountries" ServicePath="WebService.asmx" MinimumPrefixLength="1"> <atlas:AutoCompleteProperties Enabled="true" TargetControlID="TextBox1" /> </atlas:AutoCompleteExtender> <asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox><br /> </div> </form>

Next, set the MinimumPrefixLength attribute to "1." The MinimumPrefixLength attribute indicates the minimum number of characters that the TextBox control must have before it invokes the Web service to obtain the list of countries.

To associate a control (a TextBox control in this case) with the AutoCompleteExtender control, add a <atlas:AutoCompleteProperties> element within the <atlas:AutoCompleteExtender> element. Here you specify the control to associate with it using the TargetControlID attribute. Remember to set the Enabled attribute to "true."

You can associate multiple controls with the AutoCompleteExtended control by simply inserting additional <atlas:AutoCompleteProperties> element(s) into the <atlasAutoCompleteExtender> element, like this:

<atlas:AutoCompleteExtender ID="AutoCompleteExtender1" runat="server" ServiceMethod="GetCountries" ServicePath="WebService.asmx" MinimumPrefixLength="1"> <atlas:AutoCompleteProperties Enabled="true" TargetControlID="TextBox1" /> <atlas:AutoCompleteProperties Enabled="true" TargetControlID="TextBox2" /> </atlas:AutoCompleteExtender>

For now, I just want to associate a single TextBox control with the AutoCompleteExtender control.

Thanks for your registration, follow us on our social networks to keep up-to-date