自定义下拉菜单的键盘选择

Question

我制作了一个自定义的jquery下拉插件，在桌面设备和移动设备上似乎运行良好。

但是，在移动设备上，我们正在使用本机html行为，而在台式机上，我们将在ul li的帮助下根据需要设计下拉列表，然后将其附加到select标签。

但是我无法从键盘上进行任何选择，而通常我们可以从默认的本机下拉列表中进行选择。有什么解决办法吗？ 有人可以帮助我如何使用keyCode进行操作吗？或者有什么解决方案吗？

alphaDropdown: function(){
       (function(jQuery){
          jQuery.fn.AlphaDropdown = function( configurations ){
        
            var defaultConfigurations = {
              disabledFirst: false
            };
        
            var extendedconfigurations = jQuery.extend(defaultConfigurations, configurations || {});
        
            function setBackData( ){
              jQuery('.selectr-desktop-custom').each(function(){
                var selectedValue = jQuery(this).removeClass('active').find('select').eq(0).val();
                var selectedIndex = jQuery(this).removeClass('active').find('select').eq(0)[0].selectedIndex;
                if( !selectedValue || selectedValue == ""){
                    var dropdown = jQuery(this).find('select').eq(0)[0];
                    var _index = dropdown.selectedIndex;
                    if( _index >= 0 ){
                        selectedValue = dropdown.options[_index].innerText;
                        selectedIndex = _index;
                    }
                }
                if ( selectedIndex != -1 ) {
                  var moveBy = -(selectedIndex * 40), movewithY = 'translateY('+moveBy+'px)';
                  jQuery(this).find('ul').eq(0).css({
                    transform: movewithY
                  });
                };        
              });
            }
            
            jQuery(this).each(function(){
                if( jQuery(this).parents('.selectr-desktop-custom').length > 0 ){
                    jQuery(this).parents('.selectr-desktop-custom').children('ul').remove();
                    jQuery(this).unwrap('.selectr-desktop-custom');
                }
                var preselectedvalue = jQuery(this).val() ;
                if( !preselectedvalue || preselectedvalue == ""){
                    var dropdown = jQuery(this).eq(0)[0];
                    var _index = dropdown.selectedIndex;
                    if( _index >= 0 ){
                        preselectedvalue = dropdown.options[_index].innerText;
                    }
                }
                var list = "<ul>"
                jQuery(this).wrap("<div class='selectr-desktop-custom' tabindex='0'></div>");        
                jQuery(this).find('option').each(function(){
                  var currentValue = jQuery(this).val() && jQuery(this).val().trim() != ""?jQuery(this).val():jQuery(this).text();
                  if( jQuery(this).index() == 0 ){
                    if( extendedconfigurations.disabledFirst && currentValue == preselectedvalue ){
                      list += "<li class='disabled active drop' alpha-value='" + currentValue +"'>" + jQuery(this).text() + "</li>"; 
                    }else if( extendedconfigurations.disabledFirst && currentValue != preselectedvalue ){
                      list += "<li class='disabled drop' alpha-value='" + currentValue+"'>" + jQuery(this).text() + "</li>";
                    }else if( !extendedconfigurations.disabledFirst && currentValue == preselectedvalue ){
                      list += "<li class='active' alpha-value='" + currentValue +"'>" + jQuery(this).text() + "</li>"; 
                    }
                    else{
                      list += "<li alpha-value='" + currentValue +"'>" + jQuery(this).text() + "</li>"; 
                    }
                  }
                  else{
                    if( currentValue == preselectedvalue ){
                      list += "<li class='active' alpha-value='"+  currentValue +"'>"+ jQuery(this).text() +"</li>";
                    }else{
                      list += "<li alpha-value='"+  currentValue +"'>"+ jQuery(this).text() +"</li>";
                    }                    
                  }
                });        
                list += "</ul>";        
                jQuery(this).before(list);

                jQuery(this).parents('.selectr-desktop-custom').click(function(e){
                    e.stopPropagation();
                    jQuery('.selectr-desktop-custom').removeClass('active');
                    jQuery(this).addClass('active'); 
                    jQuery(this).find('ul').eq(0).css('transform','translateY(0)'); 
                }).find('ul').eq(0).find('li').click(function(e){
                    var _index = jQuery(this).index();
                    var moveBy = -(_index * 40), movewithY = 'translateY('+moveBy+'px)';
                    var ul = jQuery(this).parent();
                    var dropdown = ul.parent().find('select').eq(0);
                    jQuery(this).parent().css({
                        transform: movewithY
                    });
                    var seletedValue = jQuery(this).attr('alpha-value') || null;
                    if( seletedValue ){
                       dropdown.val(seletedValue).find('option').each(function(){
                            if( jQuery(this).text() === seletedValue || jQuery(this).val() === seletedValue ){
                                jQuery(this).attr('selected','selected');
                            }else{
                                jQuery(this).attr('selected',null);
                            }
                        });
                        dropdown[0].selectedIndex = _index;
                        dropdown.trigger('change');
                    }                    
                    jQuery(this).addClass('active').siblings().removeClass('active').closest('.selectr-desktop-custom').removeClass('active');
                    e.stopPropagation();
                    e.stopImmediatePropagation();
                    return false;
                });
                jQuery('body').click(function(e){
                    setBackData();
                });
            });
            setBackData();
            return this;
          }
        })($);
      }