List Box Tweaks (Part II)
By Jens Heuer, SAP AG, Usability Engineering Center – 11/17/2000, demo updated 08/27/2002
Introduction
In my previous column I tried to describe how to enhance a drop down-list box (DDL, for short) so that a user can enter new values on-the-fly. This is a handy feature when you need an equivalent to the "combo box" that is used in standard GUI environments.
This articles, however, deals with a different question: how to enable the user to jump quickly to an entry in a very long list. Sure, creating list boxes with many entries is not such a good idea in the first place. But if there is one, it would be nice to at least have quick access to the item you are looking for.
See a demo (example 4 of this article) and the coding. See also the previous column and the coding for its demos.
The Principle
The general principle you need to apply to the list box is called "type-ahead." What does this mean? It' very simple and can best be illustrated by the address field in Microsoft Internet Explorer (as well as in newer versions of Netscape).
As soon as you start typing a web address that you've visited before, a sort of "dropdown menu" appears and gives you a list of all the web sites starting with the letters you just typed.
Figure 1: Adress bar with type-ahead in Internet Explorer
This makes it much easier to find the addresses you've visited before and also reduces the amount of typing. An almost identical function can be found in many form fields. IE recognizes theses fields by their name and provides a type-ahead for fields with the same name (provided that you've edited such a field before and that the author of a web page has not disabled this feature).
You can try it below - type in any of your login names that you are using for web sites and the type-ahead should appear (Hint: Try double-clicking on the field to see if there are some entries already defined).
| Type in any of your login names or double click on the field (Hint: the field is called "login." If nothing happens, you've probably not submitted a login name before). Figure 2 shows what the result should look like. |
|
|
|
Example 1: Field with type-ahead |
|
Figure 2: Field with type-ahead |
This feature can save users a lot if typing, especially for frequently used fields like name, address, login name, etc.
So, this is almost what we want: a field that gives us a list of choices which is narrowed down as we continue typing. But there is one problem remaining, the list is empty initially.
Tuning the list box
As we have seen, the address field type-ahead feature is nice to quickly locate an entry in a very long list. The dropdown-list provides only rudimentary support for keyboard input. Just imagine this example:
You would like to locate the entry 'Elephant, Indian' in the following list box:
|
Search our endangered species list: |
|
|
| Example 3: A standard list box |
||
Imagine you were just filling in a form, and you don't want to switch back and forth between mouse and keyboard. You start typing an "e" and the list box positions on the entry "Eagle." Since you want to locate the "Elephant," you type an "L" next. Now the list box jumps to 'Lemur, Black', because the standard list box only interprets the first letter of a entry. This is obviously not exactly what we want - we would like to see the list box position itself on the first entry starting with "el."
Now let's try the second example; it uses a little scripting to allow type-ahead.
|
Search our endangered species list: |
|
|
|
And this is your input: |
||
|
Last Character: |
- |
|
|
Typed so far: |
- |
|
| Example 4: List box with type-ahead |
||
As you can see, typing "el" now takes you directly to "Elephant." If you type in more letters, the list box will look for the next matching entry. If it does not find one, it stays at the last selection and you can type the next letter again to find a match. To start over, just press the "escape" key. This will take you to the start of the list and you can then start typing a new search string.
Some Drawbacks
Although the little script does it's job quite nicely, there is one drawback in this solution: there's no way to create "text ranges." This means that as long as the control has the focus, all of the text of an entry is selected. Compare this with the MS-Explorer address-bar: While you are typing, the text is "split" into a selected and an unselected area. The letters you have typed are unselected while the rest (the text the system "guesses" you are going to type) is selected. This is very nice visual feedback of where you are in the typing process. Unfortunately we cannot recreate this behavior for list boxes.
As I said at the beginning, this scripting is just a work-around for a less than perfect situation. A much more preferable way of avoiding the tedious scrolling in endless lists is obvious: create short lists with no more than, say, twelve entries! But if you happen to have a long list, type-ahead can at least help the user to get quickly to the item she wants.
