Question

我正在尝试构建一个HTML无序列表，用户可以“选择”列表项（基本上它们只是在点击时被复制到div中）

虽然这很容易实现，但用户还应该能够按下键盘上的一个键，使列表滚动到第一个字母项，第一个字母等于按下的键的字母。

供参考的图片：

enter image description here

让我们假设上面列表中有200多个列表项，我想“搜索”/转到飞机，我点击键盘上的 A 和列表滚动到列表中以“a”开头的第一个实例

我想知道是否已经有任何jQuery插件，这究竟是这样吗？ :-)一直在寻找，但没有任何运气。如果没有，我当然必须自己写，我只是不确定如何实际捕获用户按下的字母。

非常感谢任何关于如何创建这个的提示！： - ）

提前致谢。

Answer 1

我编写了代码来覆盖<select multiple="multiple">的默认浏览器行为。我的结论是，尝试这样做是个坏主意，因为每个浏览器如何处理输入和jQuery代码。

我建议Mortensen先生找到一个UI小部件或替换，例如滚动div中的复选框，它将提供更可预测的行为，然后将我的代码功能应用于该选择。我使用通用<select>代码有各种选项：

不一致：我很惊讶 Opera 就像我想要的那样工作。 IE 7 只是忽略了我的代码。 Chrome ：当按下某个键以选择一个不在视图中的项目时，它会向上滚动，但不会向下滚动。令人费解。 Firefox ：我不能让event.preventDefault()工作。所以我的整个代码都被忽略了。

http://jsfiddle.net/rtLF2/

<html>
  <head>
    <style type="text/css">

    </style>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        var indices = {};
        var count = 1;

        // build a dictionary matching first letters to indices of where
        // they were found
        $("#mylist option").each(function() {
          var letter = $(this).text().charAt(0).toLowerCase();
          if(!indices[letter]) {
            indices[letter] = [];
          }
          indices[letter].push(count);
          count++;
        });

        var lastletter = "";
        var lastindex = -1;

        $("#mylist").on('keypress', function(event) {
          event.preventDefault();
          var pressed = String.fromCharCode(event.keyCode).toLowerCase();
          if(pressed == lastletter) {
            lastindex == indices[lastletter].length - 1 ? lastindex = 0 : lastindex++;
          }
          else {
            lastletter = pressed;
            lastindex = 0;
          }

          if(indices[lastletter]) {
            var target = indices[lastletter][lastindex];
            $("#mylist option:selected").each(function() {
              $(this).removeAttr("selected");
            });
            $("#mylist option:nth-child(" + target + ")").attr("selected", "selected");
          }
        });
      });
    </script>
  </head>
  <body>
    <select id="mylist" multiple="multiple" size="5">
      <option value="1">Tank</option>
      <option value="2">APC</option>
      <option>Mini tricycle</option>
      <option>Bike</option>
      <option>Megatank</option>
      <option>Brawler</option>
      <option>Trailer</option>
      <option>Md Tank</option>
      <option>Armored van</option>
      <option>War Machine</option>
    </select>
  </body>
</html>

带有热键的可滚动无序列表

1 个答案: