Autocomplete Search Pages with AJAX 

Last month, we looked at the new Atlas model for ASP.NET 2.0 that allows Web developers to create rich client scenarios on Web pages. Some AJAX applications include Google Suggest, GMail and the new Hotmail UI. Atlas lets developers use the rich processing model of ASP.NET 2.0 and do all these things by writing very little or no code at all. 

This month, we'll extend the small search application we created to work without having to write any code for the UI. We'll then proceed to achieve the same kind of functionality that Google Suggest provides-again without any coding. By the end of this article, you will be able to churn out search pages that can rival the Google autocomplete pages.

In the search page created in Part I, we had created an ASP.NET Master page that was used as a parent object to hold the entire JavaScript that is required to enable AJAX. We had also created a simple Web service that accepted a string (for a search) and
returned a simple text containing the same string back, along with the server date and time. Finally, we had created an AJAX-enabled Web page that contained a text box and a button. Clicking on this button made a request to the Web service and displayed the results without performing a postback to the server. All this was done with only a few lines of client-side JavaScript for interacting with the AJAX wrapped Web service.

To convert the same functionality into a declarative model, let us now create a new page based on the same Master page as in the previous issue and include the same set of textbox and button controls in it. 

<%@ Page Language="VB" MasterPageFile="~/Ajax.master" Title="Ajax2" %>

ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">

Let us add some declarations that will bind to the textbox, the button, the Web service and the results area. Immediately following the final

and before the in the above code, add the following.

The script is of type 'xml-script' which denotes an AJAX Webservice binding. The references section allows us to add a set of binding objects that we can use later on.

Type in a search keyword in the text box and it retrieves words from the Web service on the server

The components section is where we do the actual binding. The textbox element simply provides a binding to the text input element by its ID. The serviceMethod element is what tells the ASP.NET page which Web service to connect to and which method to use. Remember that the URL attribute can point to any WebService on the Internet. The bindings allow you to specify where the value is picked up from (the SearchKey textbox) and the property to bind to for the method of the Web service chosen. Finally, you also need to specify which binding to call when the Web service completes.

The button binding simply states that the page must call the serviceMethod defined above when clicked and the label element binds the results area on the page and the results object as returned by the Web service. Although it might look a bit cumbersome at the beginning, remember that declarative syntax is easier to maintain and create in volume. When you execute this page you will get the same functionality of an AJAX-enabled page without having to write any code.

Creating autocomplete

To perform the autocomplete functionality, you can download a simple word list from the Internet and dump it in the App_Data folder. Create a Web service called AutoCompleteService.asmx that looks for words matching a parameter. Note that for brevity, we are not including the code for doing this here.

To add autocomplete to the page, there are two things that you need to do. First, add an area where the autocomplete text will
appear as a div element just under the

on the page.

Next, modify the element so that it looks like this:

completionList="completionList" 

serviceURL="AutoCompleteService.asmx" 

serviceMethod="GetWordList"

minimumPrefixLength="2" 

completionSetCount="15" 

completionInterval="500" />

The autocomplete can have any text- including not only words but also phrases

That's all you need to do to make the page autocomplete enabled. The autocomplete behavior binds to the div you created above and the Web service and Web method. It also sets some more properties such as minimum number of characters to enter before it gets activated, the number of autocomplete entries to display and the pause after a keypress. When you execute the page, the AJAX part of Atlas connects to the Web service and gets the word list and displays it as you type in the textbox. As you can see, getting to this point took exactly zero lines of code and you are able get a fully interactive connection to a Web service for simulating the Google suggest interface.

Next month, we'll work with Atlas server controls for ASP.NET 2.0 and see how much more easier working with Web-based rich clients can become. 

Vinod Unny, Enterprise Infotech