通过按键选择引导程序下拉值

我使用引导程序btn组下拉菜单作为下拉列表的组合框。工作正常。通过按键选择引导程序下拉值

<div class="btn-group insertText insertTextSMSTemplate"> 
    <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Select a Value</button> 
    <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown" style='padding:2px;'><span class="icon-chevron-down"></span> 
    </button> 
    <ul class="dropdown-menu" style="height: 100px; overflow: auto"> 
     <li><a href="#"></a> 
     </li> 
     <!-- <li class="divider"></li> 
     <li><a href="#">Separated link</a></li> --> 
    </ul> 
</div>

我写了一个jquery函数来选择所选的li值并生成按钮文本。

但问题是，我的列表很长，我有下拉滚动。所以如果我想从下拉列表中选择说第70个李元素，我必须向下滚动并选择。

我想添加一个功能，如果第70个值是“Temp”，那么如果我按下“T”，则从列表中的T开始的单词只显示在下拉列表中。

来源

2014-01-31 Saurabh Sinha

我觉得像下面的东西应该工作。不知道，但没有尝试过运行。

$("#ID").keydown(function(e){ // the keydown even on ul 
    var chr =String.fromCharCode(e.which); 
    $(this).find("li").each(function(){ // if the key down is not in UL then make sure the "this" should refer to UL 
     var name = $(this).text(); 
     if(name.toLowerCase().indexOf(chr.toLowerCase()) === 0) { 
      $(this).focus(); // this should focus you 
      return false; 
     } 
    });

来源

2014-01-31 11:42:38

我也需要这个。下面是用jQuery自举3点对焦/选择我的工作液通过按键输入：

$(".dropdown").bind('keydown', function(event) { 
    var keyChar = String.fromCharCode(event.keyCode); 
    var selectedItem = $(this).find('a').filter(function(){ return $(this).text().indexOf(keyChar) === 0; }).first(); 
    selectedItem.focus(); 
});

说明：我们的想法是让所有的可聚焦元素的列表，在这种情况下的标签，然后通过一些过滤它们方法来测试你的按键是否是第一个字符。

希望这会有帮助

来源

2015-07-30 17:17:58 genkilabs

这个简单的解决方案适用于诸如首字母缩略词，字母代码等大写字母。正如@Edwin_Vincent指出的那样，如果您的标签被缩减，您可以添加'''.ToLowerCase（）'''。上面的解决方案对于重复按键也很好。 – genkilabs

修改版本的jenkilabs代码。如果你想环通，与按键开始的项目，然后用这个：

 

     $(".dropdown").bind('keydown', function (event) { 
      //this will open the list if it is not open and select a value 
      if (event.keyCode != 13){ 
        if ($(this).find('button').attr('aria-expanded') == 'false') 
        { 
         $(this).find('.dropdown-toggle').dropdown('toggle'); 
        } 
      } 
      var keyChar = String.fromCharCode(event.keyCode).toLowerCase(); 
      var selectedItems = $(this).find('a').filter(function() { 
       return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
      }); 
      var f = $(selectedItems).is(':focus'); 
      if (f) 
      { 
       selectedItems = $('a:focus').parent().nextAll().find('a').filter(function() { 
        return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
       }).first(); 
       if (selectedItems.length == 0) 
       { 
        selectedItems = $(this).find('a').filter(function() { 
         return $(this).text().toLowerCase().indexOf(keyChar) === 0; 
        }); 
       } 
      } 
      selectedItems.first().focus(); 
     });

的.ToLowerCase将允许您选择用小写字符开头的项目，你不必组以相同的字符开头的项目。

一个
一个
b
一个

该代码会发现第三个 '一' 在没有。 4，如果你一直按a，那么它会回到第一个'a'。

只要这（见下文）是下拉结构，这将工作。

<div class="dropdown"> 
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> 
<ul class="dropdown-menu"> 
<li><a>text here</a></li> 
</ul> 
</div>

确保<a>嵌套在<li></li>范围内，并且是带class =“下拉菜单”围绕<button>和<ul>

来源

2017-07-06 18:21:38

不错。这可能比我的用例要求更完整。 – genkilabs

@genkilabs谢谢！ –

如果您有兴趣使用插件，你可以使用Select2一个div 。它非常易于使用，当你将select初始化为select2元素时，它将包含一个搜索栏，当你键入它时，它将自动过滤这些选项。

这里是the examples所以你可以看看你是否喜欢它。

来源

2017-07-11 16:12:39 Proto

通过按键选择引导程序下拉值

回答

相关问题