<public:component>

<script>
<!--
  /*------------------------------------------------
            Event Handler Function
  ---------------------------------------------------*/

  function setSelectedIndex()
  {
    var obj = window.event.srcElement;
    if(obj.type.toLowerCase().indexOf('select') == -1)
      return true;
    if(window.event.keyCode == 27)
    {
      obj.selectedString = '';
      obj.selectedIndex = -1;
    }
    else if(window.event.keyCode == 9 || window.event.keyCode == 38 || window.event.keyCode == 40  || window.event.ctrlKey || window.event.altKey || window.event.type.toLowerCase() == 'blur') // tab, arrow-up, arrow-down, ctrl, or alt keys
    {
      obj.selectedString = '';
      return true;
    }
    else
    {
      if(typeof obj.selectedString == 'undefined') obj.selectedString = '';
      if(window.event.keyCode == 8) // backspace
        obj.selectedString = (obj.selectedString.length != 0) ? obj.selectedString.substring(0, obj.selectedString.length - 1) : '';
      else
        obj.selectedString = obj.selectedString + String.fromCharCode(window.event.keyCode);
      var newSelectedIndex = -1;
      for(var i = 0; i < obj.options.length; i++)
      {
        if(obj.options[i].text.toLowerCase().indexOf(obj.selectedString.toLowerCase()) == 0)
        {
          newSelectedIndex = i;
          break;
        }
      }
      if(newSelectedIndex != -1)
        obj.selectedIndex = newSelectedIndex;
      else
      {
        obj.selectedString = String.fromCharCode(window.event.keyCode);
        return true;
      }
    }
    window.event.returnValue = false;
  }
// -->
</script>

<public:attach event="onkeydown" onevent="setSelectedIndex()"/>
<public:attach event="onblur" onevent="setSelectedIndex()"/>

</public:component>
