Mingyi's Auto-Complete Javascript

Feature of the script

Cross-browser JavaScript that adds (correct) type-ahead/auto-complete effect for dropdown menus in IE and other browsers

Browsers compatibility (tested July 2010)

Internet Explorer: Works well and now IE menus can finally have type-ahead feature!
Firefox: Works well and fixes a long-standing Firefox bug (typing 'CCCC' won't find the right entry)
Chrome: Works well and fixes the same browser bug (typing 'CCCC' won't find the right entry)
Opera: Works well but not needed - Opera already has correct type-ahead feature
Safari: Sometimes does not work - Safari does have its own buggy implementation of type-ahead, but it also has the 'CCCC' bug that is NOT corrected by this script

Demo

Try the following menus (simply select one and start typing 'a', 'b', 'c' (or '1' etc. in the 2nd menu) in any order, and the menu will jump to the option matching what you typed)

How to use the script:

Right click on this link and save it to the directory containing your html file that has a menu. Keep the file name as "autocomplete.js"
In your html file, put <script src="autocomplete.js"></script> into your html <head> section (or pretty much anywhere before your menus)
In your html file, let's say your menu html tag was <select name="test1"> before, now change it to <select name="test1" onFocus="ml_autocomplete.populate(event)" onKeyDown="ml_autocomplete.setSelection(event)" onkeypress="return ml_autocomplete.cancel(event)"> (new in version 1.1)

That's it! Now your menu supports type-ahead in IE.

Advanced usage: If you need to use the value of the dropdown menu to populate another menu, naturally you would want to use onChange event handler of this menu. But too bad IE does not fire onChange event when user presses 'Enter' key (Firefox works correctly). Version 1.0+ of this script gets around this problem in IE. All you need to do is include something like below in your html page head section:

<script src="my_javascript_path/autocomplete.js"></script>
<script>
  function myfunction(userSelectedMenuValue)
  {
    // place your code here to use the userSelectedMenuValue
  }
  ml_autocomplete.onChange = myfunction;
</script>

Now when user types a string then presses 'Enter' key, myfunction will be called and your code will be executed whichever browser the user's using.

Version change log

1.1 (July 09, 2010) Changed onkeypress code to allow TAB key focus correctly
     in Firefox; Changed browser detection to allow 'CCCC' work in Chrome.
1.0 (Feb. 11, 2007) Allow callback function to be defined so that when user
      presses "Enter" key, the callback function will be called with the current
      value of the dropdown menu (this features allows webmaster to use the value
      from the current menu to populate another menu)
0.9 (Nov. 18, 2006) Incorporated another fix by Sarah Berry to handle unsorted
      menu options correctly.
0.8 (Nov. 6, 2006) Changed script into object-oriented JS and put into a separated
      file to be included into HTML file. Incorporated two minor bug
      fixes by Sarah Berry.
0.7 (July 12, 2005) Added handling of most printable characters, and safeguarded
      against non-printable characters such as arrow keys. An exhaustive list of
      characters allowed in the dropdown list includes: any printable characters
      that can be input with a single key press (e.g., '0' can be produced by
      pressing only '0' key, but ')' cannot be produced by a single key (it
      requires both shift and '0' keys), therefore ')' is not supported).
0.6 (July 1, 2005) Added handling of numpad/keypad keys.
0.5 (April 22, 2005) Significant code changes:
     removed unnecessary variables and function,
     changed time recording (I found that onKeyUp is not fired as quickly as
       they should be, causing inconsistent behavior at times)
     changed to use options.text instead of value, in case web page author needs
       to use value differently from text (text is the text web page viewers see,
       value is the text used by the form cgi application).
     changed default time gap for type-ahead behavior to 0.5 second from 0.3 second.
0.4 (April 7, 2005) added handling of all browsers and an improvement.
     Please note that with this version out, one probably wants to use this
     script in all Gecko-based browsers too (Mozilla, Firefox, Netscape, K-Meleon,
     ...) since the default behavior in these browsers handles consecutive
     letters in a special way (if the letter is used as the first letter for an
     option), which could be confusing to users IMO (and it works incorrectly
     for option that is composed of only one character like 'AA', since firefox
     etc. would instead move to 'AB' after users press two 'A's).
0.3 (April 6, 2005) added Duncan Cook's improvement to allow the script work on
     more than one selects
0.2 (Jan 11, 2005) added comments, shortened/improved code a little to avoid
     exception
0.1 (Oct 7, 2004) first version