TechKnack

I’ve just finished a little project that I’ve been working a few days on: replacing a form’s dropdown field (such as a State or Country field) with a more usable text field with auto-suggest. Jakob Nielson, a “usability expert”, has posted a couple of articles (Does User Annoyance Matter? and Drop-Down Menus: Use Sparingly) on how un-usable dropdown fields are. These articles and other tidbits I’d heard about dropdown usability gave me the idea to implement this auto-suggest feature.

The script, which uses jQuery and is currently only usable for one field at a time, takes the select element (via its id) and loops through its option elements. For each option, its backend (the value=”" part) and visible (between the option tags) values are read into an array, and the select element is replaced with a hidden field and a text field. Entering text into the text field triggers the suggestion script, which matches the entry against the list of options (using both backend and visible options), and builds a list of the matches, with most likely matches at the top. Once the suggestions list is built, the script displays the top options in a google-suggest-style box directly beneath the text input. The number of suggestions shown is customizable, with values between one and unlimited (value of 0). Once suggestions are shown, they can be navigated using the up and down arrow keys, and selected using the enter key. Unfortunately, I haven’t been able to capture the enter key for this action, to prevent the form from submitting. As such, using “enter” to select the highlighted option will submit the form. Suggestions can also be selected using the mouse, complete with hover effects.

If the field is blurred (that is, the cursor leaves the field, such as with the tab key), then the script tries to choose the most likely option. If the field is blank on blur, nothing is set. If a suggestion was selected with the arrow keys or mouse before the blur, then that option is set as the value. Otherwise, the top suggestion in the list is selected (in the case of tabbing through the form: tab in, type two-letter state abbreviation, tab out).

When an option is selected, the input field’s value is set to the option’s visible value, and the previously mentioned hidden field is set to the option’s backend value. This method is used to retain the aspects of dropdowns: present the user with human-readable data, but use computer-readable data in back. That, and it makes it so you can use the same server-side processing script (and/or client-side validation script) for both JS and non-JS users, since the hidden field inherits the select’s “name” field (the text input doesn’t have a “name” field).

Like I mentioned before, this script is not limited to State dropdowns. Any dropdown list will work, but I would suggest you only use it in cases where the field’s values are already known to the users (”Select package” is not a good place for this!). Just provide the script with an ID, and off it goes.

Oh, and each line of suggestion is customizable via a simple template parsing bit .

Anyway, check the example out: replacing a State dropdown and replacing a Country dropdown. All the code (other than the jQuery include) is on that page; the javascript at the top is pretty well documented. Feedback and suggestions are most welcome.