Question

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

我有一个场景，我需要建立一个类似下面的Dropdown。

<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>

所需的功能是我应该能够使用键盘输入来滚动项目，让我说我按键＆＃34; E＆＃34;在我的键盘上，它应该悬停/专注于埃及。

我意识到使用UL＆gt; Li无法实现此功能，但我们可以使用Select标签来实现此功能。

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

但是当我们使用select标签时，我们无法设置下拉列表的样式，特别是像CSS填充不适用于大多数broswers上的选择标记下拉列表。

我想问的是，我如何建立一个具有以下三个功能的下拉列表：

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并且不能使用棱角分明。

任何人都可以帮助我。

Answer 1

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

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

你可以设置<select>切换本身的样式，但不会损害可访问性。只是没有下拉。以下是一些例子：

另一种选择可能是将国家/地区编码为链接列表，并使其可以通过JS进行扩展。请务必添加适当的咏叹调角色。

Answer 2

1.打开Tab键按

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

我仍然使用ONLY 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");
      }
    }
  }
}

说明：

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

再次提醒一下，li关键点ul下拉列表的切换会影响可访问性。如果是Tab下拉列表，那就没关系了。

使用键输入搜索元素下拉列表

2 个答案: