title: How do I enable arrow navigation on keyboard for a list of Div using jQuery
body: <p>I am following a tutorial [here][1] to make a Facebook like friend tagging system. But the tutorial lacks the "arrow navigating" capability like Facebook. I would like to figure out how to achieve this.</p>
  
  <p>Basically, when I input text on the contenteditable area, it will generate divs of suggested friends like the following:</p>
  
  <pre><code>&lt;div class="display_box"&gt;    
     &lt;img src="user_img/John.jpg"&gt;
     &lt;a href="#" class="addname" title="John"&gt;John&lt;/a&gt;&lt;br&gt;
     &lt;span&gt;India&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="display_box"&gt;    
     &lt;img src="user_img/Peter.jpg"&gt;
     &lt;a href="#" class="addname" title="Peter"&gt;Peter&lt;/a&gt;&lt;br&gt;
     &lt;span&gt;USA&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="display_box"&gt;    
     &lt;img src="user_img/Mary.jpg&gt;
     &lt;a href="#" class="addname" title="Mary"&gt;Mary&lt;/a&gt;&lt;br&gt;
     &lt;span&gt;UK&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>They are all divs with the class name <code>display_box</code>. I can click on the box and select them by:</p>
  
  <pre><code>$('div').on("click",".display_box",function(e) {
      // do the stuffs
  }); 
  </code></pre>
  
  <p>I would like my users to be able to use the keyboard, using key up or key down to navigate between the selections, and use the enter key to trigger the selection. Any ideas how can I make this happen? Many thanks!</p>