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

Question

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

Answer 1

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

如果你看他们的演示页面，他们的“普通”选择框按预期工作(尽管很难注意到，因为所有选项都以“O”开头，它会跳转到第一个“选项”)和他们的样式选择框没有。

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

恐怕这不是您可能希望的“答案”。如果幸运的话，以前做过此类事情的人会听到你的请求。 ;-)