Javascript QuickSelect (Coordinated Textbox And ListBox) (See related posts)

In HTML, say you have a select element with all the states.
Unfortunately typing in this select box only works with the first letter.
So if you type P then A you don't select pennsylvania.
What I commonly do in this situation is to have what I call a quickselect textbox on the page as well.
This is a textbox and listbox that are coordinated.

// in your onload event handler you need this

// hookup event handlers and control references
var objElement = document.getElementById('cboState');
if ( objElement )
   {
   objElement.onchange = QuickSelect_Change;
   objElement.textbox = document.getElementById('txtState');
   if ( objElement.textbox )
      {
      objElement.textbox.onchange = QuickSelect_TextChange;
      objElement.textbox.onblur = QuickSelect_TextChange;
      objElement.textbox.onkeypress = QuickSelect_KeyPress;
      objElement.textbox.listbox = objElement;
      }
   }       

// and now the functions

// ----------------------------------------------------------------------------
// QuickSelect_KeyPress
//
// Description : event handler for quick select textbox's key press event
//    selects the appropriate item in the associated listbox control
//
// Arguments : none
//
// Dependencies : 
//
// History :
// 2006.09.20 - WSR : created
//
function QuickSelect_KeyPress( e )
   {


   var strCompare = '';
   var numEntryLen;
   var strEntry;
   var objSelect = this.listbox;
   var numOptions = objSelect.options.length;

   var numCharCode;
   var elTarget;

   // get event if not passed
   if (!e) var e = window.event;

   // get character code of key pressed
   if (e.keyCode) numCharCode = e.keyCode;
   else if (e.which) numCharCode = e.which;

   // get target
   if (e.target) elTarget = e.target;
   else if (e.srcElement) elTarget = e.srcElement;
                                              
   // if form input field & it is a printable character
   if ( elTarget.nodeName.toUpperCase() == 'INPUT' && numCharCode >= 32 && numCharCode <= 126 )
      {

      strEntry = this.value + String.fromCharCode(numCharCode);
      numEntryLen = strEntry.length;

      // cycle through options
      for (var i = 0; i < numOptions; i++)
         {

         // get compare string from value same length as entered string
         strCompare = objSelect.options[i].value.substring(0, numEntryLen);

         // if value matches what is entered
         if (strEntry == strCompare)
            {

            // select this option
            objSelect.options[i].selected = true;

            // end loop
            break;

            }

         }

      // I usually add an error class when input is required and not filled in
      // this removes the class so the input is no longer marked as invalid
      // commented out as it isn't necessary for general purpose
      // RemoveClassName( this, 'error' );

      }

   }
//
// QuickSelect_KeyPress
// ----------------------------------------------------------------------------


// ----------------------------------------------------------------------------
// QuickSelect_TextChange
//
// Description : event handler for quick select textbox's change & onblur events
//    makes sure item in textbox is a value from list
//
// Arguments : none
//
// Dependencies : none
//
// History :
// 2006.08.09 - WSR : created
//
function QuickSelect_TextChange()
   {

   var strCompare = '';
   var numEntryLen = this.value.length;
   var strEntry = this.value;
   var objSelect = this.listbox;
   var numOptions = objSelect.options.length;

   // cycle through options
   for (var i = 0; i < numOptions; i++)
      {

      // get compare string from value same length as entered string
      strCompare = objSelect.options[i].value.substring(0, numEntryLen);

      // if value matches what is entered
      if (strEntry == strCompare)
         {

         // select this option
         objSelect.options[i].selected = true;

         // end loop
         break;

         }

      }

   // copy code to textbox
   this.value = this.listbox.options[this.listbox.selectedIndex].value;

   // I usually add an error class when input is required and not filled in
   // this removes the class so the input is no longer marked as invalid
   // commented out as it isn't necessary for general purpose
   // RemoveClassName( this, 'error' );

   }
//
// QuickSelect_TextChange
// ----------------------------------------------------------------------------


// ----------------------------------------------------------------------------
// QuickSelect_Change
//
// Description : event handler for quick select list box's change event
//    updates the textbox with the selected value
//
// Arguments: none
//
// Dependencies :
//
// History :
// 2006.08.09 - WSR : created
//
function QuickSelect_Change()
   {

   // copy code to textbox
   this.textbox.value = this.options[this.selectedIndex].value;

   }	
//
// QuickSelect_Change
// ----------------------------------------------------------------------------