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

How to Create an Ajax Autocomplete Text Field - Part 6

By Rob Gravelle


Digg This Add to

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: