title: jQuery Key Events with a Search Box
body: <p>I'm working on an autosuggest plugin with jQuery, and I'd like to add Keypress events so that users can arrow down and up.  Also, if they press enter it will add the value to the input.</p>
  
  <p>This is what my HTML looks like: </p>
  
  <pre><code> &lt;input id="myInput" class="textInput" type="text" name="instructorName"/&gt;
       &lt;label for="search"&gt;  &lt;/label&gt;
          &lt;div id="myInputResults" class="results" style="display: block;"&gt;
             &lt;ul&gt;
              &lt;li&gt;&lt;a&gt;&lt;div class="suggClass"&gt;Suggestion #1&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;div class="suggClass"&gt;Suggestion #2&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;div class="suggClass"&gt;Suggestion #3&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a&gt;&lt;div class="suggClass"&gt;Suggestion #4&lt;/div&gt;&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
           &lt;/div&gt;
  </code></pre>
  
  <p>So far, I have something like this:</p>
  
  <pre><code>  $("#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 &lt;li&gt;"
               // Remove 'hovered' class from any other &lt;li&gt;'s
  
           }
  
  
      });
  </code></pre>
  
  <p>Up to this point, I'm not quite sure on the proper logic to use so that users can scroll up, down, and press 'enter' to select an item.</p>
  
  <p>Any suggestions and help on this would be greatly appreciated!   Thank you.</p>