带有键输入搜索元素的下拉菜单

Question

我需要您的宝贵建议和指导，以帮助我摆脱这种棘手的局面。

我有一个场景，我需要像下面这样构建一个下拉菜单。

<ul class="dropdown">
<li><a href="#">America</a></li>
<li><a href="#">Brazil</a></li>
<li><a href="#">China</a></li>
<li><a href="#">Denmark</a></li>
<li><a href="#">Egypt</a></li>
</ul>

所需的功能是我应该能够使用键盘输入来滚动项目，假设我按键盘上的键“E”它应该悬停/聚焦在埃及。

我意识到这个功能不能用 UL>Li 实现，但是我们可以使用 Select 标签来实现这个功能。

<select class="dropdown">
<option>America</li>
<option>Brazil</li>
<option>China</li>
<option>Denmark</li>
<option>Egypt</li>
<select>

但是当我们使用选择标签时，我们无法设置下拉列表的样式，尤其是 CSS 填充在大多数浏览器上的选择标签下拉列表中不起作用。

我只想问，我怎样才能用这 3 个功能构建一个下拉菜单：

1.Open on Tab key press 
2.Browse listed items using key input. 
3.Style the dropdown for cross broswer compatibility.

我确实花了很多时间在网上寻找解决方案，除了这个插件，我找不到任何完美的解决方案

https://silviomoreto.github.io/bootstrap-select/

我很遗憾地说我不允许在工作中使用任何外部插件。要实现这一点，我可以使用的唯一工具是 Bootstrap、jQuery、Javascript、CSS、HTML，并且不能使用 angular。

谁能帮帮我。

Answer 1

不幸的是，不可能在所有浏览器中一致地设置 <select> 下拉菜单的样式。 Bootstrap Select 和其他类似插件（例如 Chosen）使用 JS 和自定义标记来创建虚假的 <select>，这不利于可访问性（请参阅 https://vimeo.com/84970341#t=614s）。

就个人而言，我会使用 <select> 元素并使用默认浏览器样式。

您可以设置<select> 开关本身的样式，但不会影响可访问性。只是不是下拉菜单。以下是一些示例：

• http://adam.co/lab/jquery/customselect/
• http://www.456bereastreet.com/lab/custom-select/

另一种选择是将国家/地区编码为链接列表，并使其可使用 JS 扩展。请务必添加适当的 aria 角色。

• http://edenspiekermann.github.io/a11y-toggle/
• http://heydonworks.com/practical_aria_examples/

Answer 2

1.按Tab键打开

在ul 的 Tab 键按下时打开是一个非常糟糕的解决方案，因为 Tab 键也在窗口中执行各种功能。由于焦点必须在窗口上，下拉切换将变得有问题。如果您使用的是 input 元素，例如 select，那完全没问题。

我仍然只使用 javascript 创建了一个小型模型，因为您不允许使用任何外部库。使用ul 创建。 看看这个小提琴：JS Fiddle

HTML：

<div>
  <ul id="dropdown">
    <li class='highlight' data-key='A'><a href="#">America</a></li>
    <li data-key='B'><a href="#">Brazil</a></li>
    <li data-key='C'><a href="#">China</a></li>
    <li data-key='D'><a href="#">Denmark</a></li>
    <li data-key='E'><a href="#">Egypt</a></li>
  </ul>
</div>

CSS：

ul {
  list-style: none;
  display: none;
}

ul li.highlight {
  background: yellow;
}

Javascript：

document.addEventListener("keydown", keyDownListener, false);

function keyDownListener(e) {
  var keyCode = e.keyCode;
  var dropdwn = document.getElementById('dropdown');
  if (keyCode == 9) {
    dropdwn.style.display = (dropdwn.style.display != 'none' ? 'none' : 'block');
  } else if (dropdwn.style.display != 'none') {
    var items = dropdwn.getElementsByTagName("li");
    items[0].classList.remove("highlight");
    for (var i = 0; i < items.length; ++i) {
      var aKey = items[i].dataset.key;
      if (String.fromCharCode(e.keyCode) === aKey) {
        for (var j = 0; j < items.length; ++j) {
          items[j].classList.remove("highlight");
        }
        items[i].classList.add("highlight");
      }
    }
  }
}

说明：

1. 在您的文档上添加一个keydown 事件侦听器。
2. 按下Tab 键时显示/隐藏下拉菜单。
3. 按下任何其他键时，如果下拉菜单可见，请检查每个li 的data-key 并将其与按下的键匹配。如果匹配，请突出显示相应的列表项。

再次提醒，在Tab 按键上切换ul 下拉菜单会损害可访问性。如果是select 下拉列表，那就没问题了。