How to Create an Ajax Autocomplete Text Field - Part 6
By Rob Gravelle
Digg This
Add to del.icio.us
|
In part 5 of this series, we wrote the client-side script to manage the behavior of the Autocomplete
control in the browser. The payoff is in sight, because this week we're going to
finish the remaining Web files, including the all-important AutocompleteSearch.jsp
page.
Create the AutocompleteSearch.jsp File
Use the "Shift-Alt-N" shortcut to bring up the "New" popup menu and select the "JSP" item to open the "New JavaServer Page" dialog box (see (See Figure 1).
We'll call this file AutocompleteSearch. Click the "Finish"
button to create it.
Link External Files
We'll now link three external files to the page. The first is the AutocompleteList.js file that we created in Part 5 of the series. The
second file is the JSON parser that we downloaded and imported in Part
5 to assist with the processing of the AJAX response. The third is the AutocompleteList.css
file that we created in Part 4.
Add the following three lines to the <head> section to link the files
to the AutocompleteSearch.jsp page. Be sure to substitute the name of
your JSON parser if it's not the same one as mine (such as json2.js):
Next, we'll modify the <body>; tag to include our two JavaScript calls:
The Autocomplete Control Elements
The following code will make up the Autocomplete control (See Figure 2)
It all starts with a form (shown in red outline above) that will be submitted
when the "Lookup Funds" button is clicked. We'll set the action
attribute to "autocomplete" to match the name servlet-name
in the web.xml file (to be configured later on):
The Difference Between GET and POST
When we wrote the Java code for the AutocompleteServlet, we overrode
the HttpServlet class's protected doGet() method. It handles GET requests. The
HttpServlet class also provides a doPost() method to handle POST requests (See Figure 3)
When the user enters text in the Autocomplete field and clicks the "Lookup Funds" button, there are two ways that the form data can be sent to the server:
The GET method appends name/value pairs to the URL. This option is best suited
for short requests, because the length of a URL is limited to 256 on most browsers,
although, according to Microsoft, Internet Explorer has a maximum length of
2048 characters. As a result, the URL could be truncated if the form uses a
large number of parameters or if the parameters contain large amounts of data.
Another caveat is that the parameters are visible in the address field of the
browser — not the best place for sensitive data.
The POST method, however, packages the name/value pairs inside the
body of the HTTP request, which makes for a cleaner URL and imposes no size
limitations on the forms output. It's also more secure since it takes some
technical knowhow to intercept the request. Web programming languages makes
it simple to retrieve name/value pairs using either method. For instance, in
Java, a parameter can be retrieved using the HttpServletRequest object's getParameter(java.lang.String arg0) function, regardless of the method used.
We're using the GET method because our requests will be quite short and the fields contain no sensitive information.
The Servlet Action
A hidden field called "action" will tell the servlet that
we want to look up matching funds by name. This is not to be confused with the form's
action attribute, which sets the page that the form's contents will be
sent to, the action field will be passed to the Autocomplete servlet
as a name/value pair in the URL to set the servlet action. A value of
"lookupbyname" tells the servlet to search for matching funds. Here's the code for the form with the hidden field:
