검색 상자가있는 jQuery 주요 이벤트

Question

jQuery를 사용하여 autosuggest 플러그인을 작성 중이며 사용자가 화살표 아래로 위로 이동할 수 있도록 Keypress 이벤트를 추가하고 싶습니다. 또한 입력을 누르면 입력에 값이 추가됩니다.

<input id="myInput" class="textInput" type="text" name="instructorName"/> 
    <label for="search"> </label> 
     <div id="myInputResults" class="results" style="display: block;"> 
      <ul> 
      <li><a><div class="suggClass">Suggestion #1</div></a></li> 
      <li><a><div class="suggClass">Suggestion #2</div></a></li> 
      <li><a><div class="suggClass">Suggestion #3</div></a></li> 
      <li><a><div class="suggClass">Suggestion #4</div></a></li> 
      </ul> 
     </div> 

지금까지, 나는 이런 식으로 뭔가가 :

이이처럼 내 HTML 보이는 것입니다 지금까지

$("#myInput").keyup(function (e) { 

    var code = (e.keyCode ? e.keyCode : e.which); 

    if (code == 40) {    //If user "keys down" 

       //I would want to addClass 'hovered' to the "first <li>" 
      // Remove 'hovered' class from any other <li>'s 

     } 


    }); 

을, 나는 적절한 논리에 아주 확실하지 않다 사용자가 위로 스크롤하고 아래로 스크롤 할 수 있도록 '입력'을 눌러 항목을 선택하십시오.

모든 제안과 도움을 주시면 대단히 감사하겠습니다. 고맙습니다.

Answer 1

에서 맴돌고 클래스 하나 개의 요소가 있음 키 코드뿐만 아니라 ...

$(function(){ 
    $("#myInput").keyup(function (e) { 
     var code = (e.keyCode ? e.keyCode : e.which); 

     if (code == 40) { 
      if($("li.hovered").length == 0){ 
       $("#myInputResults li").eq(0).addClass("hovered"); 
      }else{ 
       $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); 
      } 
     }; 

     if(code == 13) { 
      if($("li.hovered").length > 0){ 
       $("#myInput").val($("li.hovered").eq(0).find("div.suggClass").eq(0).text()); 
      } 
     } 
    }); 
}); 

Answer 2

그러나 두 번째 "아래쪽 누름"을 선택하여 두 번째 강조 표시를하고 첫 번째 항목을 제거한다고 가정합니다. 등등 등등 ..

 
if(!$("li.hovered")){ //if no li has the hovered class 
    $("#myInputResults li").eq(0).addClass("hovered"); 
}else{ 
    $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered"); 
} 

이

은 가정에서 작동 될 때마다 Psytronic의 코드에, 이것은 "입력"을 포함해야 추가