スクロール順不同リスト

私はHTML、ユーザがリスト項目を「選択」することが可能です（クリックされたときに、基本的に、彼らはただのdivにコピーされている）順不同リストこの一方でスクロール順不同リスト

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

画像：

enter image description here

はのは、上記のリストにある200の以上のリスト項目があることをふりをしましょうと私は飛行機に行く/「検索」したい、私は上のを襲った私キーボードとリストは "a"で始まるリストの最初のインスタンスにスクロールします

すでにjQueryプラグインがあるかどうか疑問に思っていました。 :-)周りを探索していましたが、運がまったくありません。そうでなければ、私はもちろんそれを自分で書く必要があります。実際にユーザーが押した手紙をどのようにキャプチャするのかは分かりません。

これを作成する方法に関するヒントは非常に高く評価されています。 :-)

ありがとうございます。

出典

2012-05-08 bomortensen

あなたは[jQueryのUIのオートコンプリート]（http://jqueryui.com/demos/autocomplete/） –

をしたいように、私達にあなたのスクロール可能なリストのためのHTMLを表示してください聞こえます。重要な出来事をつかんで行動するのは難しいことではありませんが、あなたのHTMLがどんなものかを見極める必要があります。 – jfriend00

'tank'、' trolley'、 'racecar'をお持ちの方は' tr'をタイプするとどうなりますか？ –

<select multiple="multiple">のデフォルトのブラウザ動作を上書きするコードを記述しました。私の結論は、各ブラウザが入力とjQueryコードをどのように扱うかによって、これをやってみることは悪い考えです。

私はMortensenに、より予測可能な動作を提供するスクロールdiv内のチェックボックスなどのUIウィジェットまたは置換を見つけて、その選択肢に自分のコード機能を適用することを提案します。

矛盾：：私は、一般的な<select>コードで立ち往生して、さまざまなオプションがあります私はオペラは私が望んでいただけのように働いた驚きました。 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-09 01:17:18

こんにちはミア、ありがとうございました！それはちょうど素晴らしいものです:-)私はこれについてプロジェクトマネージャーに話をして最後の数日を過ごしました、そして、彼らはまったく通常のオートコンプリートを望んでいるようです。：/私は間違いなくあなたのコードを後で使用するために保存しようとしています！もう一度ありがとう:) – bomortensen

@bomortensen私はあなたのコードが異なるブラウザで同じを実行しないと言うとき、私はそれがバグだと言うので、あなたは普通のオートコンプリートを使用することができます幸運だと思います：|さて、1,000人以上の担当者を受け入れてくれてありがとう。:) –

スクロール順不同リスト

答えて

関連する問題