Javascript 带热键的可滚动无序列表_Javascript_Jquery_Html

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

javascript jquery html

Javascript 带热键的可滚动无序列表,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试构建一个无序列表I HTML，用户可以在其中选择列表项，基本上，当单击时，它们只是被复制到一个div中虽然这很容易实现，但用户也应该能够按下键盘上的键，使列表滚动到第一个列表项，其中第一个字母等于按下的键的字母供参考的图像：让我们假设上面的列表中有200多个listitems，我想搜索/去飞机，我在键盘上点击A，列表滚动到列表中以A开头的第一个实例我想知道是否已经有jQuery插件了，这正是我想要的吗？：-一直在四处寻找，但一点运气都没有。如果不是，我当然得自己写，我只是不知道

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

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

供参考的图像：

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

我想知道是否已经有jQuery插件了，这正是我想要的吗？：-一直在四处寻找，但一点运气都没有。如果不是，我当然得自己写，我只是不知道如何真正捕捉用户按下的字母

非常感谢您提供任何有关如何创建此功能的提示！：-

提前感谢。

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

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

矛盾：我很惊讶歌剧能像我想的那样工作。IE 7忽略了我的代码。Chrome：当按下一个键选择一个看不见的项目时，它会向上滚动，但不会向下滚动。令人费解。Firefox:我不能让event.preventDefault工作。所以我的整个代码都被忽略了

听起来你想知道如果你有坦克，手推车和赛车，当tr被输入时会发生什么？请给我们显示你的滚动列表的HTML。抓取关键事件并对其采取行动并不困难，但我们需要看看您的HTML是什么样子。@Vega:我想它可以根据需要进行修改，是的：谢谢@Miadiorenzo：在这种情况下，它应该滚动到列表中以t开头的第一个实例，按下r后，它应该滚动到列表中以r开头的第一个实例：它应该只滚动一个键/字母Hi Mia，非常感谢！这真是太棒了：-过去几天我一直在和项目经理讨论这件事，他们似乎只想定期自动完成。。唉！：/我一定会把你的代码保存起来，以便以后使用！再次感谢：@bomortensen我认为你很幸运，你可以使用一个普通的旧自动完成，因为当我说我的代码在不同的浏览器上运行不一样时，我说这是一个错误：|好吧，谢谢你接受并接受了我1000多个代表：

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