How to Create an Ajax Autocomplete Text Field - Part 6 / Page 2 | WebReference

How to Create an Ajax Autocomplete Text Field - Part 6 / Page 2

[previous] [next]

How to Create an Ajax Autocomplete Text Field - Part 6 [con't]

The Autocomplete Elements

The Autocomplete elements make up the visual component of the Autocomplete control, which consists of a label, a textbox and a submit button (See Figure 4).

For the sake of simplicity, we use a table to arrange the fields, but once our prototype is up and running, we'll convert it to use proper CSS positioning instead.

The Autocomplete textbox is just a regular input text field except that it includes the IE-only autocomplete="off" attribute so that the browser won't insert its own autocomplete list based on previous entries. The call to autoComplete() takes place on the onkeyup event so that the new character will be included in the text field's value. The "Lookup Funds" button is of type submit so that the form's contents are sent to the server for searching when clicked:

The Autocomplete List

A second table row with an ID of "auto-row" will act as a placeholder where the top of the Autocomplete list will be positioned on the screen:

The <div> section that follows the form contains the table where we'll append the Autocomplete list rows. We'll make this <div> visible once the list has been populated:

We've now implemented all the functionality for the Autocomplete control, but we still need some pages to display the fund information when the user clicks on a list item or hits the "Lookup Funds" button.

Fund Details.jsp

Fund information is displayed in the Fund Details.jsp page. It uses JSP Expression Language to access the Fund class's attributes by using the ${expr} syntax. Create the new file as we did above by using our custom shortcut menu by selecting the "JSP" item from the popup menu to open the "New JavaServer Page" dialog. Name it "Fund Details" and click the "Finish" button to create the new page. Insert the following code in the page <body>


After the AutocompleteServlet finds matching funds they are forwarded to the Results.jsp page to display. On this page we have more room to include additional fields that could help the user further narrow down their search.

Create the new file as we did above and insert this line at the top of the page, immediately after the page encoding:

This tells the server where to find the specifications for the JSTL core library. Without it, the server would have no idea how to interpret the JSTL tags. JSTL provides some common functionality such as iteration and conditionals, as well as tags for manipulating XML documents, internationalization and SQL. It also provides a framework for integrating custom tags with existing JSTL tags.

We use both the conditional and iteration tags to process the search results. The outer <c:choose> tags are equivalent to an IF statement. The <c:when> executes when the test="${requestScope.funds == null}" expression evaluates to true and the <c:otherwise> runs when it's false. The requestScope object is one of three that facilitate object persistence. The other two are sessionScope and applicationScope.

To display the details in the Fund Details.jsp page, the <c:forEach> loop iterates through all the funds in an ArrayList and displays a link back to the AutocompleteServlet along with the "lookup" action and the fund symbol:

The Javascript: history.back() function uses the browser's history to navigate to the previous page; in our case it will always be the search page.


This is the last page we need to build. Any errors that occur in the servlet cause the request to be forwarded to this page. Right now it simply notifies the user that an error has occurred, but it could easily be converted to a JSP page to display a more detailed error message:

Deploying to the Server

Edit the Web Module Deployment Descriptor

Web modules in J2EE have a deployment descriptor where you configure the Web application and its components. This deployment descriptor is called web.xml. According to the J2EE specification, it must be located in the WEB-INF folder and contain definitions for the servlet and the servlet URI mapping.

The file was automatically generated when your created the Autocomplete project. Locate the web.xml file in the "Project Explorer" pane and double-click it to bring it up in the editor (See Figure 5).

Enter the following lines into web.xml after the <welcome-file-list>:

The Web module deployment descriptor can contain a number of different elements, but only the following are required:


The servlet element contains the declarative data of a servlet. Within it, the following child elements are required:


Defines the canonical name of the servlet, used to reference the servlet definition elsewhere in the deployment descriptor.

Use only one of either the <servlet-class> or <jsp-file> tags in your <servlet> body:

The fully-qualified class name of the servlet.


The full path to a JSP file within the Web Application, relative to the Web Application root directory.


The <servlet-mapping> element defines a mapping between a servlet and a URL pattern. It contains two child nodes, both of which are required.

The name of the servlet to which you are mapping a URL pattern. This name has to match the name you assigned a servlet in the <servlet> declaration tag.

Describes a pattern used to resolve URLs. The portion of the URL after the http://host:port + WebAppName is compared to the url-pattern by the Server. If the patterns match, the servlet mapped in this element will be called.

Here are some examples:


We also included the optional description <servlet> element. It's used to provide descriptive text about the Web Application.

See the references at the end of this article for the full list of Web module deployment descriptor elements.

[previous] [next]