2012-03-02 4 views
0

Я пытаюсь вывести всплывающее окно автозапуска с помощью клавиш со стрелками.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> 

ШАГОВ реплицировать

  1. типа в "б" в текстовом поле. в раскрывающемся списке отображаются 6 имен, начинающихся с «b»
  2. используйте клавишу со стрелкой вниз, чтобы перейти к «Betsy»
  3. введите «r» после «b» в текстовом поле. в раскрывающемся списке отображаются 3 имени, начинающихся с «br»
  4. использовать клавишу со стрелкой вниз для перемещения. «Браун» подсвечивается. Вместо этого следует выделить «Брайан».

Как сбросить счетчик до -1?

ответ

4

Полностью непроверенный, но имеет смысл просто сбросить его до -1, если не будет нажата клавиша «стрелка вниз»?

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

Пожалуйста, перечитайте вопрос и шаги для его повторения. Я использую клавишу со стрелкой вниз для навигации. – techlead

+0

Я согласен с @Sheldon, возможно, вам придется сбросить его в начале обработчика ... поместите скрипку вместе для этого – charlietfl

+0

Я довольно уверен, что у меня есть логика правильная - пользователь будет либо печатать в текстовом поле (в котором case keycounter будет -1) или нажатием «стрелка вниз», стрелка вниз, стрелка вниз ». Если они перестанут нажимать стрелку вниз и начинают набирать что-нибудь еще, разве вы не хотите, чтобы индекс был сброшен? –

Смежные вопросы