title: jqTransform Select - Scroll to letter typed
body: <p>I've got a form that uses jqTransform to replace the standard select boxes and radio buttons.  It all works fine and dandy, except one thing that annoys me:</p>
  
  <p>Since it replaces the select box with a list of links, when you type a letter to scroll it doesn't do anything.  For instance, you click to open up the select, then type an S.  It should scroll to the first S in the list, but nothing happens.  Is there a way to re-instate this functionality?  Below is the jqTransform code for the select box.  I don't see a handler for this type of thing:</p>
  
  <pre><code>/***************************
    Select 
   ***************************/   
  $.fn.jqTransSelect = function(){
      return this.each(function(index){
          var $select = $(this);
  
          if($select.hasClass('jqTransformHidden')) {return;}
          if($select.attr('multiple')) {return;}
  
          var oLabel  =  jqTransformGetLabel($select);
          /* First thing we do is Wrap it */
          var $wrapper = $select
              .addClass('jqTransformHidden')
              .wrap('&lt;div class="jqTransformSelectWrapper"&gt;&lt;/div&gt;')
              .parent()
              .css({zIndex: 10-index})
          ;
  
          /* Now add the html for the select */
          $wrapper.prepend('&lt;div&gt;&lt;span&gt;&lt;/span&gt;&lt;a href="#" class="jqTransformSelectOpen"&gt;&lt;/a&gt;&lt;/div&gt;&lt;ul&gt;&lt;/ul&gt;');
          var $ul = $('ul', $wrapper).css('width',$select.width()).hide();
          /* Now we add the options */
          $('option', this).each(function(i){
              var oLi = $('&lt;li&gt;&lt;a href="#" index="'+ i +'"&gt;'+ $(this).html() +'&lt;/a&gt;&lt;/li&gt;');
              $ul.append(oLi);
          });
  
          /* Add click handler to the a */
          $ul.find('a').click(function(){
                  $('a.selected', $wrapper).removeClass('selected');
                  $(this).addClass('selected');   
                  /* Fire the onchange event */
                  if ($select[0].selectedIndex != $(this).attr('index') &amp;&amp; $select[0].onchange) { $select[0].selectedIndex = $(this).attr('index'); $select[0].onchange(); }
                  $select[0].selectedIndex = $(this).attr('index');
                  $('span:eq(0)', $wrapper).html($(this).html());
                  $ul.hide();
                  return false;
          });
          /* Set the default */
          $('a:eq('+ this.selectedIndex +')', $ul).click();
          $('span:first', $wrapper).click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
          oLabel &amp;&amp; oLabel.click(function(){$("a.jqTransformSelectOpen",$wrapper).trigger('click');});
          this.oLabel = oLabel;
  
          /* Apply the click handler to the Open */
          var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
              .click(function(){
                  //Check if box is already open to still allow toggle, but close all other selects
                  if( $ul.css('display') == 'none' ) {jqTransformHideSelect();} 
                  if($select.attr('disabled')){return false;}
  
                  $ul.slideToggle('fast', function(){                 
                      var offSet = ($('a.selected', $ul).offset().top - $ul.offset().top);
                      $ul.animate({scrollTop: offSet});
                  });
                  return false;
              })
          ;
  
          // Set the new width
          var iSelectWidth = $select.outerWidth();
          var oSpan = $('span:first',$wrapper);
          var newWidth = (iSelectWidth &gt; oSpan.innerWidth())?iSelectWidth+oLinkOpen.outerWidth():$wrapper.width();
          $wrapper.css('width',newWidth);
          $ul.css('width',newWidth-2);
          oSpan.css({width:iSelectWidth});
  
                       $ul.css({height:'420px','overflow':'hidden'});
  
          // Calculate the height if necessary, less elements that the default height
          //show the ul to calculate the block, if ul is not displayed li height value is 0
          $ul.css({display:'block',visibility:'hidden'});
          var iSelectHeight = ($('li',$ul).length)*($('li:first',$ul).height());//+1 else bug ff
          (iSelectHeight &lt; $ul.height()) &amp;&amp; $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff
          $ul.css({display:'none',visibility:'visible'});
  
      });
  };
  </code></pre>
  
  <p>Here is what we tried to do to implement this:</p>
  
  <pre><code>var oLinkOpen = $('a.jqTransformSelectOpen', $wrapper)
     .keypress(function (e) {
         $.each(myArray, function (i, l) {
             var sc = l.substr(0, 1).toLowerCase();
             var kc = String.fromCharCode(e.which);
             if (sc == kc) {
                 $select[0].selectedIndex = i;
                 $('span:eq(0)', $wrapper).html(l);
                 $ul.hide();
                 return false;
              }
  });
  });
  </code></pre>