javascript - jqTransform Select-滚动到键入的字母

我有一个使用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'});

    });
};

这是我们尝试实现的方法:

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

最佳答案

哎呀没有代码我就错过了全局。现在，我了解发生了什么...是的，因为新的链接列表实际上不再是一个选择框，所以没有“恢复”功能。如果jqTransform默认不包含可滚动选项，我想您必须实现一个。

如果查看他们的演示页面，则他们的“普通”选择框将按预期工作(尽管很难注意到，因为所有选项均以“O”开头，它将跳至第一个“选项”)，而其样式选择框则无效。

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

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