How to Create an Ajax Autocomplete Text Field: Part 3 | WebReference

How to Create an Ajax Autocomplete Text Field: Part 3

By Rob Gravelle


Digg This Add to

In the previous installment, Part 2 - The Fund Class, we built a container class for the fund's properties. On the server, a HashMap object will hold a collection of funds to be searched. Matching ones will be converted to a JSON array and returned to the browser to display in our Autocomplete list. This week we'll be developing the AutocompleteServlet. The servlet acts much like an ASP, Perl or PHP script in that it's executed by the server and accepts parameters from the browser. There's one important difference between Java and the languages that I just mentioned: unlike these, Java is a complete language, not a script. That provides several advantages over the former. For instance, the byte code a compiled class uses runs at a fairly decent speed. More importantly, Java can be developed in feature-rich IDEs like Eclipse which allow thorough debugging and testing. It also provides all the perks that come with OOP languages such as encapsulation, inheritance, abstraction, polymorphism, etc. For these reasons, it's hard to beat the scalability of Java.

Importing the JSON Java Utility Files

In the last article, we downloaded the JSON Java Utility source files, but we haven't done anything with them yet. Now would be a good time to bring them into our project, because our Servlet class won't compile without them. Here's how to do it from within Eclipse.

If you open any of the JSON Java files in a text editor or Eclipse, you'll see by the top line that they should reside in a package called "org.json."

Therefore, we'll create two subfolders under our main source folder for the JSON files. There are several ways to do it, but the simplest method is to use the "Import" command under "File: Import..." on the main menu (See Figure 1).

In the "Import" dialog, select "File System" (See Figure 2).

The next thing is to provide the "From Directory." Use the "Browse..." button to locate the folder which contains the seven JSON files. Once you've closed the "Import from Directory" dialog, the folder you selected will appear in the left window pane, while the seven files will appear in the right one. The checkboxes beside each item are used to flag it for import. Unless you have other files in the same folder, simply selecting the source folder on the left will automatically select all the files contained therein. Now we have to specify the "Into Folder." Click the second "Browse" button and select the "src" folder, since it's the root for our source files. Our one remaining task is to create the two subfolders under our project root. To do that, we can type the extra path info in the "Into Folder" textbox. Hence, we would add "/org/json" to the path of "Autocomplete/src" (See Figure 3).

Click the "Finish" button to see the new packages and files under the "Java Resources: src" folder.

Create the Autocomplete Servlet

Looking at the Fund class, it should be apparent that it doesn't do much. The actual processing takes place in the AutocompleteServlet class. A servlet is a special type of Java class that can handle server requests and provide an appropriate response. We'll be overriding a method that will take a course of action based on the "action" parameter.

We'll create the new class in very much the same way as we did for the Fund:

  1. Right-click on the "Java Resources" branch in the "Project Explorer" pane.
  2. Hover the mouse pointer over the "New" item to bring up the second popup.
  3. Click on the "Class" item to bring up the "New Java Class" dialog (See Figure 4).

The AutocompleteServlet class must extend HttpServlet. To set its parent class, we can use the "Browse..." button to bring up the "Superclass Selection" dialog. Type "httpservlet" in the "Choose a Type" textbox. In fact, you probably won't have to type more than a couple of characters before the "javax.servlet.http.HttpServlet" package appears at the top of the list (See Figure 5)

Select it and click on OK to close the dialog and create the new class.

Here's the resulting empty AutocompleteServlet class: