JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <input placeholder="KeyDown Here ..." type="text" id="text" />
    <ul id="select">
        
        <li class="option current">Option 1<li>
        <li class="option">Option 2<li>
        <li class="option">Option 3<li>
        <li class="option">Option 5<li>
        <li class="option">Option 91<li>
        <li class="option">Option 8<li>
        <li class="option">Option 1<li>
        <li class="option">Option 165<li>
        <li class="option">Option 89<li>
        <li class="option">Option 1<li>
        <li class="option">Option 15<li>
        <li class="option">Option 0255<li>
        <li class="option">Option 8<li>
        <li class="option">Option 5698<li>
        <li class="option">Option 025<li>
        <li class="option">Option 1<li>
    </ul>
    
    
</div>

CSS

#select{
    
    height:100px;
    overflow:auto;
    cursor:pointer;
    list-style:none;
    
}
.current{
    background:red;
    
}

JavaScript

$('#text').focus().bind('keydown',function(e){

  if( e.keyCode == 40 )
  {
      $('option.current').removeClass("current").next().addClass('current');
  }
  if( e.keyCode == 38 )
  {
      $('option.current').removeClass("current").prev().addClass('current');
  }
   
});