Type-Ahead Selects, v1.2.4

Supply any <select> with the attribute typeahead="true", include the library file TypeAheadSelect.js, and this library will replace the select with an input box that auto-completes what the user types from the choices in the select. Note: IEWin5+ only currently. (This documentation is huge and a little slow because it has 10,000 options available--2,000 per example.)

In Action

Choose one of 2000 baby names. (Must match existing value, shows matches.)

Enter a baby name. (Can be any value, shows suggested matches.)

Choose one of 2000 baby names. (Must match existing value, shows up to 40 matches based on substring, e.g. "avi" matches "Gavin".)

Choose one of 2000 baby names. (Must match existing value, uses type-ahead autocompletion.)

Enter a baby name in this baby-blue box. (Can be any value, uses type-ahead autocompletion for possible matches.)

Features/Docs

If showmatching="true" is supplied, a drop down list of matching choices will appear under the input as the user types, rather than auto-completing in the input.

If substringmatching="true" is supplied along with showmatching, the user may type a piece of text from the middle to match. Use maxmatches (below) to keep this from being very slow on large sets, especially as the first characters are typed.

Use maxmatches="20" (or the integer of your choice) along with showmatching to limit how many items are displayed in the select. (Default is to not limit the matches returned.)

Use dropdownsize="20" (or the integer of your choice) to choose how many matches are visible in the drop down at once. (Default size is 8.)

If allowcustomvalue="true" is supplied, the user may type strings other than those supplied by the select's options.

Use maxlength="20" (or the integer of your choice) to limit what the user may type.
Will not limit the text length of values auto-completed.

If usevalues="true" is supplied, a hidden input will instead be used to submit the information, and will use the value associated with the option selected. (Only makes sense if allowcustomvalue is not true.)

Use inputsize="10" (or the integer of your choice) to control the size of the type-into input. (Width may also be set via CSS class, below.) Default is to not specify any size.

Use inputclass="..." to set the CSS class of the input.

Use inputstyle="..." to set the CSS style attributes for the input.

Use showinitialvalue="true" to have the input start out with the text of the selected option.

Notes

Sorted/Unsorted Values: When showmatching="false", the value matching picks the 'best' match based on the first string in the option set which matches what has been typed so far. Usually it will make sense to have the values sorted alphabetically, so that if the user types "M" in a state-name input "Maine" will appear and not "Montana". However, if you know the frequency with which options are picked, it probably makes sense to sort them based on decreasing frequency first. For example, suppose users fill out 'Missouri' far more often than 'Maine'...placing that option first in the options on the page will cause it to appear when just an 'M' has been typed, while still allowing users to get to 'Maine' by typing an 'a' next.

ToDo

FEATURE: ESC: Make escape key work 'as expected'. (Hide the drop down, and possibly make it revert to the previous value.)
FEATURE: browser expansions: Currently only tested/works on IE5+ Win. The type-ahead portion can't work on IEMac, but the showmatching flavor should be able to work. And all features should be possible with NS6, though that will require some work.
BUG: onscreen: If the select is near the bottom of the screen it may go off the bottom. Investigate either making it shorter or scrolling the page to show the control.
FEATURE: case sensitive: Currently string matching is case-insensitive. Nastiness with event.keyCode trapping onkeydown prevents this from being trivial to add (and really is useful in only a small set of circumstances).
BUG: maxlength: If maxlength is set, trim auto-completed values to that length also.