jqTransform选择 - 滚动到字母输入

Question

我有一个窗体使用jqTransform来替换标准的选择框和单选按钮。这一切工作正常和丹迪，除了一件事情让我很懊恼：

由于它将选择框替换为链接列表，当您键入一个字母滚动它不会做任何事情。例如，你点击打开select，然后输入S.它应该滚动到列表中的第一个S，但没有任何反应。有没有办法重新设置这个功能？以下是选择框的jqTransform代码。我没有看到一个处理程序这种类型的事情：

/*************************** 
    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('<div class="jqTransformSelectWrapper"></div>') 
      .parent() 
      .css({zIndex: 10-index}) 
     ; 

     /* Now add the html for the select */ 
     $wrapper.prepend('<div><span></span><a href="#" class="jqTransformSelectOpen"></a></div><ul></ul>'); 
     var $ul = $('ul', $wrapper).css('width',$select.width()).hide(); 
     /* Now we add the options */ 
     $('option', this).each(function(i){ 
      var oLi = $('<li><a href="#" index="'+ i +'">'+ $(this).html() +'</a></li>'); 
      $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') && $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 && 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 > 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 < $ul.height()) && $ul.css({height:iSelectHeight,'overflow':'hidden'});//hidden else bug with ff 
     $ul.css({display:'none',visibility:'visible'}); 

    }); 
}; 

下面是我们试图做来实现这个：

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; 
      } 
}); 
}); 

Answer 1

哦宕。我错过了没有代码的大局。现在我看到发生了什么...是的，没有“恢复”功能，因为新的链接列表实际上不再是选择框。如果jqTransform在默认情况下不包含可滚动选项，我认为你必须实现一个。

如果你看他们的演示页面，他们的“普通”选择框按预期工作（虽然很难注意，因为所有选项都以“O”开始，它将跳转到第一个“选项”），并且他们的样式选择盒子没有。

没有深入研究代码，我怀疑这意味着按键捕获不在插件中实现。

恐怕这不是你可能希望的“答案”。幸运的是，之前做过这种事情的人会听到你的请求。 ;-)

为jqTransform

Answer 2

解决方案选择按键工作环节的访问http://www.techapparatus.com/jqtransform-select-problem-with-keyboard-type-solution

Answer 3

此链接提供工作液：

http://www.techapparatus.com/jqtransform-select-problem-with-keyboard-type-solution.html

Answer 4

在返回this.each结束（函数添加以下代码（ index）{...}）;那就是$ .fn.jqTransSelect函数的内部。

另外你必须安装scrollTo jquery插件。

CODE：

var newChar; 
$(document).bind("keydown", function (e) { 
    var char = String.fromCharCode(e.which); 
    var code = e.keyCode || e.which; 
    var charFound; 

if($ul.css('display') != 'none'){ 
    if (newChar != char){ 
     newChar = char; 

      $ul.find('a').each(function(){ 
       // Find first occurence of li that starts with letter typed 
       if ($(this).text().substr(0,1).toUpperCase() == char && $(this).text() != "Choose"){ 
        charFound = true; 

        $('a.selected', $wrapper).removeClass('selected'); 
        $(this).addClass('selected'); 
        $select[0].selectedIndex = $(this).attr('index'); 
        $($select[0]).trigger('change'); 
        $that = $(this); 

        return false; 
       } 
      }); 

      if (charFound == true){ 
       // Scroll to selected value 
       $ul.scrollTo($('a.selected', $ul), 400); 
      } 
     } 

     //If Enter has been pressed, select the value 
     if(code == 13) { 
      $('span:eq(0)', $wrapper).html($that.html()); 
      $ul.hide(); 
      return false; 
     } 
    } 
});