Select li element with arrow keys (up and down) using Javascript (jQuery)
<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>