Javascript QuickSelect (Coordinated Textbox And ListBox)
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 // ----------------------------------------------------------------------------