Javascript QuickSelect (Coordinated Textbox And ListBox)

Will_Rickards (Will Rickards) — Wed, 20 Sep 2006 21:31:48 GMT

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

// ----------------------------------------------------------------------------

DZone Snippets: coordinate code

Javascript QuickSelect (Coordinated Textbox And ListBox)