title: Select li element with arrow keys (up and down) using Javascript (jQuery)
body: <p>I got this problem...I have an input which works as searcher and when I write something it show an ul with the list of matches and it works,
  the <code>&lt;ul&gt;</code> and <code>&lt;li&gt;</code> items are generated with PHP via AJAX</p>
  
  <p>This is my input</p>
  
  <pre><code>&lt;input type="text" class="form-control" id="searchProduct" placeholder="Search..." /&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/fQn3F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fQn3F.png" alt="enter image description here"></a></p>
  
  <p>This is the <code>&lt;ul&gt;</code> </p>
  
  <pre><code>&lt;ul id="list"&gt;
      &lt;li id="match1" class="itemList"&gt;&lt;/li&gt;
      &lt;li id="match2" class="itemList"&gt;&lt;/li&gt;
      &lt;li id="match3" class="itemList"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>After the list is generated the focus is still on the input and it's ok but I would like to use the arrow keys (up and down) to select one of the items</p>
  
  <p>And I'm trying with code that I see in another answer but it is not working for me, I know that I'm doing something wrong but i can't figure out what the problem is... this is the javascript code</p>
  
  <pre><code>var li = $('#list &gt; li');
  var liSelected;
  $(window).on('keydown', function(e){
      if(e.which === 40){
          if(liSelected){
              liSelected.removeClass('background');
              next = liSelected.next();
              if(next.length &gt; 0){
                  liSelected = next.addClass('background');
  
              }else{
                  liSelected = li.eq(0).addClass('background');
              }
          }else{
              liSelected = li.eq(0).addClass('background');
          }
      }else if(e.which === 38){
          if(liSelected){
              liSelected.removeClass('background');
              next = liSelected.prev();
              if(next.length &gt; 0){
                  liSelected = next.addClass('background');
  
              }else{
  
                  liSelected = li.last().addClass('background');
              }
          }else{
  
              liSelected = li.last().addClass('background');
          }
      }
  });
  </code></pre>
  
  <p>NEW INFO:</p>
  
  <pre><code>$('#searchProduct').keyup(function() {
  
  var search = $(this).val();
  
  if (search != '') {
  
      $.ajax({
  
          type: 'post',
          cache: false,
          url: '../includes/procedures/autocomplete.php',
          data: { search: search },
  
          success: function(datos) {
  
              $('#coincidenciasBusqueda').show();
              $('#coincidenciasBusqueda').html(datos);
          }
      });
  }
  </code></pre>
  
  <p>});</p>