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”开头，它会跳转到第一个“选项”）和他们的样式选择框没有。

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

我担心这不是你可能希望的“答案”。运气好的话，之前做过这种事情的人会听到你的请求。 ; - ）

Answer 2

jqTransform的解决方案选择按键工作链接访问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（function（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;
        }
    }
});

jqTransform Select - 滚动到键入的字母

4 个答案: