Using a nice AJAX auto completable input box is much nicer (for the user) than a combo box with 100 options. If you use jQuery, you may use a quite easy yet powerful plug-in called jquery.autocomplete (original, eh?). Grab it athttp://www.pengoworks.com/workshop/jquery/autocomplete.htm.

Anyway, just to sum it up (you can learn how to use it in detail from the authors web page of course), I use it as follows:

1. First you need to bind the plug-in to the field(s) you want.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 

  <script>     $(document).ready(function() {         $("#login").autocomplete("<html:rewrite page='/auth/users/autocomplete.action'/>", {                 delay:10,                 minChars:3,                 matchSubset:1,                 matchContains:1,                 cacheLength:1,                 autoFill:true,                 formatItem:formatItem,                 formatResult:formatResult             });     }); </script>

The most relevant issues here are:

• The URL from where to get the auto-complete values (in this case a Struts action)
• The function to format the value displayed in the auto-complete list (formatItem)
• The function to format the value loaded into the input field once the user selects an option from the auto-complete list (formatResult)

The page that renders the auto-complete results (in this case autocomplete.action) can end in a JSP that looks something like:

  <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><c:forEach items="${autocompleteList}" var="user">${user.name}|${user.login}</c:forEach>

As you can see it renders one line per item in the list, printing the users name and login separated by a pipe. The autocomplete plugins parses this list, taking each line as a row and each field (delimited by pipes) as a property.

Then we can write the two format functions:

  1 2 3 4 5 6 7 

  function formatItem(row) {     return row[0]; }   function formatResult(row){     return row[1]; }

Which will result in the plug-in showing the users names as auto-complete options, and when one is selected the users login will be loaded into our form input field.

If you want to be a little more fancy, you can add some highlighting to the text part of each auto-complete option that matches what is currently entered into the input field:

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 

  function formatItem(row) {     return wrapSubstring(row[0], $("#login").val(), "<span class='autocompleteHighlight'>", "</span>"); }   function wrapSubstring(original, substring, prefix, suffix, fromIndex){     var result = original;       pos = result.toUpperCase().indexOf(substring.toUpperCase(), fromIndex);     if (pos>=0){         result = result.substring(0, pos) + prefix + result.substring(pos, pos+substring.length) + suffix + result.substring(pos+substring.length);           fromIndex = pos + suffix.length + prefix.length + substring.length;         if (fromIndex<=result.length){             result = wrapSubstring(result, substring, prefix, suffix, fromIndex);         }     }       return result; }