我正在使用 Bootstrap 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个li元素,我必须向下滚动并选择。
我想给它添加一个功能,如果第70个值是“温度”,那么如果我按“T”,列表中从T开始的单词只显示在下拉菜单中。
6条答案
按热度按时间gev0vcfq1#
jenkilabs代码的修改版本。如果你想循环通过以按键开始的项目,那么使用这个:
ToLowerCase允许你选择以小写字符开始的项目,你不必把以相同字符开头的项目组合在一起,例如。
1.项目a
1.项目a
1.项目a
这段代码将在第4个位置找到第三个“a”,如果你一直按a,那么它将回到第一个“a”。
只要这是下拉菜单的结构(见下文),这将起作用。
确保
<a>
嵌套在<li></li>
中,并且<button>
和<ul>
周围有class=“下拉”的divctzwtxfj2#
我也需要这个。下面是我的Bootstrap 3 focus / select by key input的工作解决方案:
说明:其思想是获取列表中的所有可聚焦元素(在本例中为标记),然后通过某种方法过滤它们,以测试按下的键是否是第一个字符。
希望这能帮上忙
fnx2tebb3#
我想下面这样的东西应该会起作用。不确定,虽然没有试过跑步。
gmxoilav4#
如果你对使用插件感兴趣,你可以使用Select2,它非常容易使用,当你初始化select作为select2元素时,它会包含一个搜索栏,当你输入选项时,它会自动过滤选项。
这里有the examples,所以你可以看看你是否喜欢它。
1aaf6o9v5#
我也遇到过同样的问题,我是这样解决的:
首先添加id到ul和按钮然后做以下操作
注意:还将keyChar全局定义为空
waxmsbnn6#
当我在最初的问题9年后来到这里时,我想我会提供一个更新的答案。genkilabs答案仍然是完美的,但我想使用香草js,因为jQuery的一切可能现在都可以在香草JavaScript中轻松实现。
我只测试了这为 Bootstrap 4,但由于其基于genkilabs的答案为 Bootstrap 3,它也应该在那里工作。
如果您遇到原始的下拉切换控件元素被此代码聚焦的问题,那么您可以通过将其添加到find()来排除它