Skip Navigation | Home | Code Samples | Articles | Links | About | Contact Me | Make a Payment

Select Search

Note: The only browser/os combinations that support this script are Internet Explorer 5.0, 5.5, and 6.0 on Windows.

This select box behaves differently than the usual textbox when it has focus and you use the keyboard. Rather than three consecutive presses of the letter a resulting in "Algeria" being selected, it would look for an entry with the first three letters being "aaa" and if found select it. Try clicking in the select box and typing a - n - t - i. You'll see that "Antigua and Barbuda" is selected.

Use the backspace key to remove a character at a time from the internally stored string you've typed in that is trying to be matched against the option values.

Use the escape key to reset the string and the select box

While building this form, however, I was reminded of why select boxes don't work like this — you can't remember what you've typed in so far. Consequently, I decided that the only conscientious way to build this would be permit the usual method to still work, effectively allowing this functionality to extend the <select>'s current behavior. Without this, the only time it would be appropriate to use this is when you're creating a web-based, non-publicly accessible, application that's intended to replace a system that uses this sort of form widget and the users of the system are dependent on it for efficiency. Obviously this doesn't leave much chance without the caveat I placed on myself when building this.

Updates:

Arrow keys now work properly. [2002-Jan-22]

The blur event now clears the selectedString propery meaning future interaction with the element via the keyboard will create a new string to match against. [2002-Jan-22]

The select now properly supports the default behavior of pressing a-a-a and having the third <option> selected if there isn't an <option> whose text value begins with "aaa". [2002-Jan-22]

Now available as a behavior. [2002-Feb-1]

Known Issues:

This extended functionality doesn't play nice with non-alphanumeric characters. [2002-Feb-25]

Sized Select Example
Dropdown Example

I finally got around to making this super-easy to install. Now, to use this on your site, all you have to is to add the following bit to your stylesheet:

select {
  behavior: url({path to behavior}select_keydown.htc);
}

Just be sure to adjust the path to the htc file so the browser can find it. The nice thing about applying it in this manner is that now all your dropdown menus will have this functionality without changing a single line of HTML. Additionally, since Microsoft Internet Explorer is the only browser that currently supports behaviors, it is the only browser that will instantiate it when it encounters the CSS above. In other words, it doesn't matter who's viewing the page, it will work for all your IE5.0+ users and not throw any errors for others.

Don't forget to download the behavior.

Behavior Example 1
Behavior Example 2