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
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>
Results.jsp
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.
Error.html
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:
servlet:
The servlet element contains the declarative data of a servlet. Within it, the following child elements are required:
servlet-name-
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:
servlet-class- The fully-qualified class name of the servlet.
jsp-file- The full path to a JSP file within the Web Application, relative to the Web Application root directory.
OR
servlet-mapping:
The <servlet-mapping> element defines a mapping between a servlet and a URL pattern. It contains two child nodes, both of which are required.
-
servlet-name - 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.
-
url-pattern -
Describes a pattern used to resolve URLs. The portion of the URL after the https://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:
/soda/grape/*
/foo/*
/contents
*.foo
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.
Find a programming school near you
