jquery - 下向き矢印キーカウンターをリセットする

矢印キーを使用してオートコンプリートドロップダウンを操作しようとしています。テキストフィールドに "B" にjquery - 下向き矢印キーカウンターをリセットする

タイプを複製するために

JSON

{ 
    "employees":[ 
     { 
      "name": "Alex" 
     }, 
     { 
      "name": "Alice" 
     }, 
     { 
      "name": "Brian" 
     }, 
     { 
      "name": "Betsy" 
     }, 
     { 
      "name": "Beck" 
     }, 
     { 
      "name": "Bob" 
     }, 
     { 
      "name": "Brad" 
     }, 
     { 
      "name": "Brown" 
     } 
    ] 
}

jQueryの

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
     <title>Untitled Document</title> 
     <style> 
      .selected{background-color:pink;} 
     </style> 
     <script type="text/javascript" src="js/jquery-1.6.4.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function(){ 
       var keyCounter = -1; 
       jQuery.ajax({ 
        type: "GET", 
        url: "myjson.json", 
        dataType: "json", 
        async: "true", 
        contentType: "application/x-javascript; charset=utf-8", 
        cache: "false", 
        success: function(response){ 
         $("input#myInput").live("keyup", function(e){ 

          var myInputVal = $("input#myInput").val(); 
          var myInputValLen = $("input#myInput").val().length; 

          $("ul#myList").empty(); 

          for (var x = 0; x < response.employees.length; x++) { 

           var empName = response.employees[x].name; 

           if (empName.substring(0, myInputValLen).toLowerCase().search(myInputVal.substring(0, myInputValLen).toLowerCase()) != -1) { 
            $("ul#myList").append("<li>" + empName + "</li>"); 
           }               
          } 
          if (e.keyCode == 40) {       
           var keyCnter = keyCounter;      
           var listLen = $("li").length;       
           if (keyCnter != listLen - 1) { 
            keyCnter++; 
            $("li").removeClass("selected"); 
            $("li").eq(keyCnter).addClass("selected");         
            keyCounter = keyCnter; 
           }    
          } 
         }); 
        } 
       }) 
      }) 
     </script> 
    </head> 
    <body> 
     <input type="text" width="25" id="myInput"> 
     <ul id="myList" style="margin:0px;"></ul> 
    </body> 
</html>

STEPS。ドロップダウンは "b"で始まる6つの名前を表示します。

テキストフィールドに "b"の後ろに "Betsy"に移動するには下矢印キーを使用して

"r"を入力します。ドロップダウンは、 "br"で始まる3つの名前を表示します。

下矢印キーを使用してナビゲートします。「ブラウン」が強調表示されます。代わりに、 "ブライアン"を強調表示する必要があります。

カウンタを-1にリセットするにはどうすればよいですか？

出典

2012-03-02 techlead

完全にテストされていませんが、下矢印以外が押されている場合は、-1にリセットするだけですか？

if (e.keyCode == 40) { 
    ... 
} else { 
    keyCounter = -1; 
}

出典

2012-03-02 20:37:30

複製する質問と手順をもう一度お読みください。私はナビゲーションに下矢印キーを使用しています。 – techlead

私は@Sheldonに同意し、ハンドラの始めにリセットする必要があるかもしれません...これのために一緒にフィーバーを入れてください – charlietfl

私はかなり論理が正しいと確信しています - ユーザーはテキストボックスにキーカウンターが-1になる場合）、または「下向き矢印、下向き矢印、下向き矢印」を打つ。彼らが矢印を打つのを止めて何か他のタイプを打ち始めるなら、あなたはインデックスをリセットしたくありませんか？ –

jquery - 下向き矢印キーカウンターをリセットする

答えて

関連する問題