ajax autocomplete

A Implementation in Search of a Requirement

Simple requirement: let the user select their timezone.

The JDK I have installed has over 500 timezones included. That is more than I really wanted to put into a list.

I thought that a cool way to do it would be to have the user type a bit of their city name or country and have the computer pick the most likely timezones. (A few days later and I have all sorts of better ideas how to actually do this, but for now let us presume this was an inspired idea).

Obviously, since Ajax is so sexy right now, I wanted to use that in the implementation.

There are various Ajax libraries/frameworks/implementations. I selected DWR (http://getahead.ltd.uk/dwr/). It automates exposing Java objects, which works for what I need to do.

So Where Is That Autocomplete Widget?

I pretty quickly got up to speed with DWR just following their getting started guide (http://getahead.ltd.uk/dwr/getstarted).

DWR made it easy for me to take the text a user was typing, and use DWR to grab a list of timezone names that matched.

What DWR does not provide is any HTML widgets to help display the result (it does contain a few util methods to get/set input/list control contents). Specifically it does not provide an autocomplete widget.

On their hints page (http://getahead.ltd.uk/dwr/hints) they mention using the Script.aculo.us Autocompleter.Local component (http://wiki.script.aculo.us/scriptaculous/show/Autocompleter.Local). Sadly my poor sensibilities were offended by all the Javascript baggage required to use this widget. Plus it had to be modified to support DWR.

After much searching around and grinding of teeth I decided I needed that I would need to do some Javascript coding for myself to get this done.

The Minimal AutoComplete Widget

I attached the autocomplete widget source to this page. It should run without any other includes. The Javascript is simple enough that I think I even understand it. The display is CSS driven. And it integrates nicely enough with DWR.

Sample usage goes something like this:

<script type='text/javascript' src='<%=request.getContextPath() %>/js/autocomplete.js'></script>
<%!-- substitute your dwr class --%>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/JTZ.js'></script>
<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/engine.js'></script>
<input id="tz" type="text" name="id"/>
<br/>
<div id="theDiv"></div>
<script>
var ac = new AutoComplete(
              document.getElementById('tz'),
              document.getElementById('theDiv'),
              250 // max size of dropdown
              // the function that is called to queue up the ajax request
              , function (text) {
                  DWRUtil.useLoadingMessage();
                  JTZ.getTimeZoneIds(text
                    , {callback:onZoneInfo});
              }
          );
// this is the function called by the ajax framework (dwr) after the remote
// call completes.  it them updates the autocomplete list
function onZoneInfo(zones) {
    ac.repopulate(zones);
}
</script>

Which results in this:

80% There

The widget only permits selection via mouse clicks. If I had another few days to fiddle around with this I would need to make selections possible via the keyboard. Fancier/more complex widgets (like the Scriptaculous one) appear to have keyboard selectors already.