Java Auto-Completing Combobox Applet

JumpToWidget is a Java applet that combines a text input box with a list box so that a user can make a selection from a large list quickly by typing in a substring into the text input box. On each keypress, the List box updates to show only the options that contain the entered substrings. Substrings are separated by spaces in the text input box. Only options which contain every substring are matched, and the comparison is case insensitive by default. This widget attempts to mimic the behaviour of the "Jump To File" feature in Winamp.

This type of interface provides a huge usability improvement over the alternatives. In fact, when you call 411, the operators use exactly this type of interface to quickly lookup a phone number based on the name of the entity you specify. The alternatives are dropdown boxes, which require painful scrolling, and multi-page narrowing of categories, which requires reading many options and multiple page requests. Imagine how long a directory assistance call would take if the 411 operators used those! Some example of where to use this type of interface would for eBay's category selection, or Yahoo Auto's automobile make and model selection. Alas, they do not use this technique yet.

Instructions

Requirements and Features

This Java applet requires a Java 1.1 virtual machine, and can be used in later versions of both Internet Explorer and Netscape.

This JumpToWidget will have superb performance even if it contains many thousands of options. Because the Java List implementation has a very slow add function, the options list is only fully populated if it gains focus. While it is being populated a "Loading..." message appears in the list. If the user is only using the text entry box, the options list refreshes very fast. The user can type tab or press the down arrow key to move into the options list.

This JumpToWidget does not do any sorting of the options. It maintains the order specified in the name and value strings.

JavaScript Usage Examples

You can use Javascript to obtain data from the Java applet. The selected option can be accessed in Javascript by calling the applet's getSelectedValue or getSelectedName functions. For example, you could retrieve the selected value and submit it with a form. The JavaScript function below demostrates how to access the name and value.

function showSelected()
{
     appletObj = document.applets[0];
     selectedValue = appletObj.getSelectedValue().toString();
     selectedName = appletObj.getSelectedName().toString();
     alert("Value: "+selectedValue+" Name: "+selectedName);
}

The options list can be initialized using parameters in the applet tag. Alternately, one can set up the options by calling the loadNamesAndValues function with namesString and valuesString parameters. Each name and value in the parameter strings must be separated by a pipe '|' character.

function loadNewOptions()
{
 	appletObj = document.applets[0];
 	appletObj.loadNamesAndValues("Joe|John|Jack|Jim","1|2|3|4");
}

If the names and values don't agree in number, then an error is printed in the text field. However, if names are set and the values are empty, then the names are used as values. In this case, accessing either the selected name or value will return the same thing. The above JavaScript works in later versions of both Netscape and Internet Explorer.

By default, the substring matching is case insensitive. To make it case sensitive, add a parameter to the applet tag called casesensitivity and set its value to 1. Alternately, you can control the sensitivity by calling the function setCaseSensitivity with a string parameter that is either "1" or "0".

You can also set

HTML Usage Example

<APPLET CODE="JumpToWidget.class" WIDTH="300" HEIGHT="300">
<PARAM NAME="names" VALUE="Jill|Jane|Joan|Janet">
<PARAM NAME="values" VALUE="19|20|21|22">
<PARAM NAME="casesensitivity" VALUE="1">
<PARAM NAME="fontname" VALUE="SansSerif">
<PARAM NAME="fontpointsize" VALUE="11">
</APPLET>

HTML applet parameters can not contain a double quote " character. For this reason, the method of specifying the names and values here with a pipe separator is actually a poor technique. A better idea is to use a null byte or other non-printable character as the separator, then gzip and base64 encode the names and values parameters. Later Java runtimes have functions to do decode and gunzip the parameters, and PHP can write them into the web page. This makes the page load ten to twenty times faster, and guarantees special characters won't break the HTML code.

Java Compile Command

javac -target 1.1 -classpath %classpath% -verbose -deprecation JumpToWidget

Note: You must specify virtual machine target version 1.1 in order for it to work in Internet Explorer 6.0.

The source code is in the public domain, and the applet is free for any use.

• Download Applet - JumpToWidget.class
• View Source Code - JumpToWidget.java