1

ユーザーがリストアイテムを「選択」できるHTMLの順序付けられていないリストを作成しようとしています(基本的に、クリックするとdivにコピーされます)

これは非常に簡単に実現できますが、ユーザーはキーボードのキーを押して、最初の文字が押されたキーの文字に等しい最初のリスト項目までリストをスクロールできるようにする必要があります。

参考画像：

ここに画像の説明を入力

上記のリストに 200 以上のリストアイテムがあり、「検索」/飛行機に乗りたいとします。キーボードでAを押すと、リストが「a」で始まるリストの最初のインスタンスにスクロールします。

jQueryプラグインがすでに存在するかどうか疑問に思っていましたが、それはまさにこれを行いますか? :-) 探し回っていましたが、まったく運がありませんでした。そうでない場合は、もちろん自分で作成する必要があります。ユーザーが押す文字を実際にキャプチャする方法がわかりません。

これを作成する方法についてのヒントは大歓迎です! :-)

前もって感謝します。

4

1 に答える 1

0

のデフォルトのブラウザー動作をオーバーライドするコードを作成しました<select multiple="multiple">。私の結論は、各ブラウザが入力と jQuery コードをどのように扱うかという理由で、これを試みるのは悪い考えだということです。

モーテンセン氏に、より予測可能な動作を提供するスクロール div 内のチェックボックスなどの UI ウィジェットまたは置換を見つけてから、その選択に私のコード機能を適用することをお勧めします。<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>
于 2012-05-09T01:17:18.477 に答える