issue with choosing li elements using the arrow keys in javascript or jquery

I have been trying to do this forever now but i didnt know how. Basically i have this code below that generates li elements and append them to an already existing ul.

$(document.body).on("keyup", "", ".menuSearch", function (e) {
    if (e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40) {
        $(".searchResults").html("");
        var searchField = $(".menuSearch").val();
        var expression = new RegExp(searchField, "i");
        HidingShowingUlForSearch();
        $.each(finalJsonForMenu, function (key, value) {
            if (value.title.search(expression) != -1 || value.description.search(expression) != -1) {
                $("#searchResults").append(
                    '<li class="list-group-item mickyMouseResultLi" style=" border:none; min-width: 95%;">' +
                    '<a target="_blank" href="' + value.url + '"</a>' +
                    '<p>' +
                    value.title + '</p>' + '</li>');

                //+'<p style="color: #757373">' + value.description + '</p>' 
            }
        });
    }
});

now thats great its working the way I want it too but then after the li generates i have to use the courser to point and click on them, while I need a way that i can just use the arrow keys with the enter button to access the newly generated li's. any suggestions?