Question

我有一个很长的国家/地区列表，我在下拉菜单中创建了滚动条，因此您可以滚动它们。它看起来像这样：

https://codepen.io/Karadjordje/pen/MEBjRY

<div class="dropdown">
  <button class="btn btn-danger dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu scroll-menu" role="menu">
    <li>
      <a href="#">
        A
      </a>
    </li>
    <li>
      <a href="#">
        B
      </a>
    </li>
    <li>
      <a href="#">
        C
      </a>
    </li>
    <li>
      <a href="#">
        D
      </a>
    </li>
    <li>
      <a href="#">
        E
      </a>
    </li>
    <li>
      <a href="#">
        F
      </a>
    </li>
  </ul>
</div>

我需要使用此下拉列表进行某种搜索。我没有按照设计进行搜索的输入字段，所以我需要区别对待。

所需的功能是我应该可以使用键盘滚动到国家/地区，假设我按下键盘上的“M”键，它滚动到以字母“M”开头的国家，如果我按下“A” “它应该回滚到以字母”A“开头的国家。有没有办法实现这个目标，我应该如何解决这个问题呢？

编辑：更新了具有解决方案最新想法的codepen

Answer 1

正如有人在评论中所说的那样，这有点棘手和复杂，但据说我做了很多进步。它远非抛光产品，我很确定还有一些我没有涉及的案例，但对于其他可能需要这种情况的人来说，我认为这将是一个坚实的基础。

你可以在这里看到它：https://codepen.io/Karadjordje/pen/MEBjRY?editors=1010
这是JS代码：

April

Answer 2

使这个功能成功的jQuery插件可以参考以下网址并将其视为参考：

参考网址：https://harvesthq.github.io/chosen/

转到标准选择选项

滚动到非常长的下拉菜单的键盘输入上的项目

2 个答案: