﻿var keysPressed = [];

function selectAsYouType(e)
{

    var keyChar; var keyNum;
    var comboBox;
    if (window.event) // IE
    {
        keyNum = e.keyCode;            
    }
    else
    {
        return true; // browser doesn't support DOM, do default processing.
    }
    
    keyChar = String.fromCharCode(keyNum);
    comboBox = e.srcElement;
    
    if (!comboBox)
    {
        return true; // if DOM didn't work, do default processing
    }
    if (keyNum == 27) // Esc key
    {
        clearKeysPressed(comboBox);
    }
    else
    {
        return selectElement(comboBox, keyChar);
    }
    return true;
}

function clearKeysPressed(e)
{
    if (e.srcElement)
        keysPressed[e.srcElement]="";
}

function selectElement(comboBox, keyChar)
{
    var i = 0;
    var keysPressedSoFar =     keysPressed[comboBox] || "";
    keysPressedSoFar += keyChar;
    keysPressed[comboBox] = keysPressedSoFar;
    var options = comboBox.options;
    for (i = 0; i<options.length; ++i)
    {
        if (options[i].text.toUpperCase().indexOf(keysPressedSoFar.toUpperCase(), 0) == 0)
        {
            comboBox.selectedIndex = i;
            return false; // don't do default processing
        }
    }
    keysPressed[comboBox] = String(keyChar); // didn't match start of any option, so reset keysPressed to just this key
    return true;        
}

/*
<P><CODE>keysPressed</CODE> is a global array that stores the keysPressed for 
each combo box in the page. Each combobox that needs the select-as-you-type 
behavior would need to add two handlers. </P>
<UL>
<LI><CODE>onkeypress="return 
selectAsYouType(event)" </CODE>- this captures keypresses on the combobox 

<LI><CODE>onblur="clearKeysPressed(event)" 
</CODE>- this clears off the keyboard cache (for that combobox)when focus moves 
out of the combobox </LI></UL>For example <PRE><select onkeypress="return selectA(event)" onblur="clearKeysPressed(event)">
    <option>A</option>
    <option>B</option>
    <option>AB</option>
    <option>ABC</option>
    <option>C</option>
</select>

</PRE>
*/