How to Create an Ajax Autocomplete Text Field

Part 1: Making Use of Free Development Tools

Have you experienced the hassle of trying to fill out a badly designed online form? At times like these we're reminded that the Web began as an information exchange medium and not one that catered to a satisfying user experience. Fortunately, there's hope! Modern technologies such as Flash and AJAX have paved the way for an Internet that more closely resembles computer applications than a magazine layout. AJAX in particular, has proved to be a blessing to Web developers because it's built on previously-existing languages such as JavaScript, XML and DHTML. It seems that every day offers more ingenious usages of AJAX to improve the end-user experience. In my last series, Universally Related Popup Menus: AJAX Edition, we saw how AJAX can be used to link the contents of a select field to a parent one. Now we're going to use AJAX to create an Autocomplete text field using the Eclipse Web Tools Platform with the Apache Tomcat server. Each week we'll concentrate on a different developmental task. Once we have a working prototype of the autocomplete control, we'll look at ways to make it behave and function better!

The Autocomplete Function

There are many flavors of autocomplete text boxes; all help the user make a selection from a list by suggesting possible entries. As the user types additional letters, the list can either restart the search using the new character for the first letter, or it can further narrow down the list by adding the new character to the match criteria. We'll be doing the latter.

The autocomplete function is especially helpful where there are many options, as in a country or city list. In some cases, the user might know exactly what to type, such as when searching for an employee. They may know the person's ID number, but not the full name. By using an autocomplete text field, the user can quickly narrow the number of items down to a manageable quantity. There's also the issue of bandwidth. Downloading a list of hundreds or even thousands of entries is impractical even if you could filter them on the client-side. That's where AJAX comes to the rescue. As with the URPMs, retrieving a limited number of items greatly eases the server load.

Autocomplete Example

Our Autocomplete Text Field

The autocomplete text field that we're going to construct will behave much like the one on the Yahoo Finance Web site. Their excellent autocomplete text field matches either the symbol or company name to the text field's value. Items displayed in the list contain the symbol, full name and the market where the stock is traded. The icing on the cake is the bold match highlighting.

We'll be borrowing some of the features of the Yahoo site by including a couple of fields in the list, match highlighting and even arrow key support.

Today's Task: Configure the Development Environment

What You'll Need

Besides learning about AJAX, the autocomplete control will give us a taste of many Web development languages and tools. Some of the technologies that we'll be utilizing include Java, JavaScript, JSP pages, Servlets, the Document Object Model (DOM), DHTML and CSS style sheets. To get all of these parts to fit together, we'll be taking advantage of some free tools that have been created just for that purpose, including Eclipse, the Java JDK, the Apache Tomcat server, the Web Tools Platform plugins, as well as the JSON utility Java classes and JavaScript parsers. Programing is all about reuse, so why not ride on the coattails of those who produced these technologies? Besides being free, the tools I selected for this tutorial are available for download as well.

JDK SE 1.5+

To develop Web applications, you need the full Java Standard Edition Development Kit (JDK SE) and not just the Java Runtime Environment (JRE). You can get the latest JDK from Sun.

Tomcat 6+

Tomcat is the official reference implementation for the Java Servlet and Java Server Pages (JSP), which makes it the perfect choice for developing Java Web applications. Tomcat is available from the Apache site. You can substitute your own server as long as it supports servlets and JSP pages.

You'll also need the jstl-1.2.jar, available at the java.net site. It contains classes to parse tags from the Java Server Pages Standard Tag Library (JSTL). The JSTL tags are used to perform common programming tasks such as iteration and conditionals, manipulating XML documents, internationalization and locale-sensitive formatting and working with SQL:

Web Tools Platform (WTP) project

The WTP project allows you to develop, test and deploy Web applications in the full-featured Eclipse IDE. It's got all the bells and whistles that you'd expect in a Brand name IDE except that it's open source. You can download the WTP from the Eclipse Webtools Platform Download page. There are several different packages available, depending on your needs. The easiest to download is the all-in-one package. It contains the latest version of Eclipse (3.3 at the time of writing) and all the required plug-ins. Be forewarned, the file is over 250 Megabytes. Don't try it over a dial-up modem connection!

If you already have Eclipse, you can download the "Web Tools Platform Complete" package instead. It contains the plug-ins for the WTP, j2ee Standard Tools Project (STP) and Java Server Faces (JSF) projects. The WTP also uses the following components from other eclipse projects:

The Eclipse Modeling Framework, EMF, Java emf model, JEM, are used to define models for artifacts defined in many Java, w3c, xml and j2ee standards.
The Graphical Editing Framework, GEF, is used to provide graphical editing capabilities for xml, xsd and wsdl editors.
The Data Tools Platform, DTP, is only required if you intend on doing EJB or JPT development.

You can download these components separately at the top of the page if you want to break down the downloading into smaller chunks of data. Here are the home pages for each of these projects:

If you don't have the capability or inclination to download huge files, you can always forego the Eclipse and WTP entirely and use the old school approach: Create the files in your favorite text editor and use the Java via the command line to compile the Java classes. To save yourself the hassle of copying the files to your server you can work on them in place! For a more moderate approach, TextPad has the capability to compile Java files from the Tools menu.

The JSON Java Utility Classes

The folks at the JSON Project have written some helpful classes for converting your classes to JSON Objects. We'll be making use of these.

Go to the www.JSON.org Java page and download the seven Java source files at the top of the page. They are:

JSONObject.java
JSONArray.java
JSONStringer.java
JSONWriter.java
JSONTokener.java
JSONException.java
JSONString.java

The JSON JavaScript Parser

It's never a good idea to assume that data reaching your code is safe. Using the native JavaScript eval() function is risky with untrusted sources because it's capable of executing JavaScript's full notation, including calling functions and accessing cookies. To be on the safe side, use a JSON parser instead. There's one on the www.JSON.org at the very bottom of their JavaScript page.

[next]