Spartan Java

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 at http://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;
}