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
// ----------------------------------------------------------------------------