Question

我正在使用bootstrap btn-group下拉菜单作为下拉列表的组合框。工作正常。

<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值并制作按钮文本。

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

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

Answer 1

修改了jenkilabs＆＃39;码。如果你想循环通过按键开头的项目，请使用：


        $(".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将允许您选择以小写字母开头的项目字符，并且您不必对以相同字符开头的项目进行分组角色在一起前。

a
一个
B'/ LI>
一个

此代码将找到第三个＆＃39; a＆＃39;没有。 4，如果你一直按a，那么它会回到第一个＆＃39; a＆＃39;

只要这个（见下文）是下拉列表的结构，这将有效。

<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>内，并且有一个div，其中class =＆＃34; dropdown＆＃34;围绕<button>和<ul>

Answer 2

我也需要这个。这是我使用jQuery按键输入的Bootstrap 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();
});

说明：我们的想法是获取列表中的所有可聚焦元素，在本例中为标记，然后通过某种方法对其进行过滤，以测试您按下的键是否为第一个字符。

希望这有帮助

Answer 3

我认为下面的内容应该有效。不确定但是没试过跑。

$("#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; 
        }
   });

Answer 4

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

以下是the examples，因此您可以查看是否喜欢它。

Answer 5

我也遇到了同样的问题，我这样解决了它：

首先将ID添加到ul和button 然后执行以下操作

$('#buttonId').on('keyup', function(){ 
       var key = String.fromCharCode(event.keyCode);
       if(event.which !== 8) {
           keyChar += key;
       } 
       if(event.which === 8) {
          keyChar = keyChar.slice(0, -1);
       }
       var regex = new RegExp('^' + keyChar, 'i');

       $("#ulId li").each(function(){
         if(regex.test($(this).text())) {
            $(this).css("display", "block");
            $(this).addClass('active');
         }else{
            $(this).css("display", "none");
         }
       });
 });
 $('#ulId').on('blur', function(){ 
   keyChar = '';
   });

NB。还全局将keyChar定义为null

按键选择bootstrap下拉值

5 个答案: