jQuery Principaux événements avec un champ de recherche

Question

Je travaille sur un plugin autosuggest avec jQuery, et j'aimerais ajouter des événements Keypress pour que les utilisateurs puissent fléchir vers le haut ou vers le bas. De plus, s'ils appuient sur Entrée, la valeur sera ajoutée à l'entrée.

C'est ce que mon HTML ressemble à:

<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> 

Jusqu'à présent, j'ai quelque chose comme ceci:

$("#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 

     } 


    }); 

Jusqu'à ce point, je ne suis pas tout à fait sûr de la bonne logique à utiliser pour que les utilisateurs puissent faire défiler vers le haut, le bas et appuyez sur «Entrée» pour sélectionner un élément.

Toutes les suggestions et l'aide à ce sujet seraient grandement appréciées! Je vous remercie.

Answer 1

Ajout sur le code de Psytronic, cela devrait couvrir la touche « entrée » code clé également ...

$(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

Mais je présume que par la suite vous voulez que la deuxième "pression vers le bas" pour mettre en évidence le second et retirer du premier? Et ainsi de suite et ainsi de suite ..

 
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"); 
} 

Cela fonctionne sur l'hypothèse qu'il n'y a qu'un seul élément avec la classe plané à tout moment