Javascript jq转换选择-滚动到已键入的字母

我有一个表单，它使用jqTransform替换标准的选择框和单选按钮。除了一件让我恼火的事外，一切都很好，很漂亮：

由于它将选择框替换为链接列表，因此当您键入要滚动的字母时，它不会执行任何操作。例如，您单击打开选择，然后键入一个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'});

    });
};

---

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

如果您查看他们的演示页面，他们的“普通”选择框会按预期工作（尽管很难注意到，因为所有选项都以“O”开头，它将跳转到第一个“选项”），而他们的样式化选择框则不会

如果不深入研究代码，我怀疑这意味着插件本身没有实现按键捕捉

---

恐怕这不是你所希望的答案。幸运的是，以前做过这种事情的人会听到你的恳求

jqTransform的解决方案选择按键工作链接访问

在返回的末尾添加以下代码。每个（函数（索引）{…}）；这在$.fn.jqTransSelect函数中

您还必须安装ScrollTojQuery插件

代码：

---

jqTransform初始化和HTML示例将非常方便。我猜，您的事件处理程序正在丢失；在这种情况下，将祖先元素委派为侦听器将解决此问题。但是，在没有示例或查看jqTransform的情况下，我不知道这是否取决于您自己的代码或jqTransform中的功能。我在原始问题中添加了选择框的jqTransform代码。我的HTML非常简单，我猜我只需要在select中添加一个按键事件来搜索列表并更改索引，但我是jQuery的新手，不知道如何做：）是的。我应该问“如何在jqtransform中实现这一点？”考虑到jqtransform似乎相当流行，我在网上找不到多少东西似乎很奇怪。我的朋友试图修复，我添加了上面的代码。

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

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