JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list-group searchResults pre-scrollable mickyMouseUl" style="position: absolute; z-index: 13; border: 1px solid rgb(206, 206, 206); display: block;" id="searchResults">
  <li class="list-group-item mickyMouseResultLi" tabindex="1" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" a="">
      <p>APU/APIIT PAGOL</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="2" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink"  a="">
      <p>APU B.Sc. Presentations</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="3" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink"  a="">
      <p>APU Parking Guideline</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="4" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink" a="">
      <p>APU Documents</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="5" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink"  a="">
      <p>APU Student Handbook</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="6" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink"  a="">
      <p>APU B.Sc Presentations &amp; EOS Interview/LCM Schedules - Management Console</p>
    </a>
  </li>
  <li class="list-group-item mickyMouseResultLi" tabindex="7" style=" border:none; min-width: 95%;">
    <a target="_blank" href="testlink"  a="">
      <p>APU B.Sc Presentations &amp; EOS Interview/LCM Schedules</p>
    </a>
  </li>
</ul>

CSS

.selected {
	color:red;
}

JavaScript

$(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();
				var finalJsonForMenu = [{url:'test_link', title:'first title'}, {url:'test_link2', title:'second title'}];
        $.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 + '">' +
                    '<p>' +
                    value.title + '</p></a>' + '</li>');

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


/* TEST CODE FROM STACK_OVERFLOW: https://stackoverflow.com/a/8902976/4031083  */


var liSelected;
$(window).keydown(function(e) {
		var li = $('li');
    if(e.keyCode === 40) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.next();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else {
            liSelected = li.eq(0).addClass('selected');
        }
    } else if(e.keyCode === 38) {
        if(liSelected) {
            liSelected.removeClass('selected');
            next = liSelected.prev();
            if(next.length > 0) {
                liSelected = next.addClass('selected');
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else {
            liSelected = li.last().addClass('selected');
      ...