JSFiddle - React, Tailwind, and code Playground

HTML

<div id="first"><input type="text" /></div>
<div id="second"> 
<ul>
<li class="display_box current">suggestion</li>
<li class="display_box">suggestion2</li>
<li class="display_box">suggestion3</li>
</ul>


</div>

CSS

.current{
  background:#3b5998;
  color:#FFFFFF;
}

JavaScript

$('.display_box').hover(function (){            
    $(this).attr('class', 'display_box current')
}, function (){
    $(this).attr('class', 'display_box');
});


$('#first input').keyup(
function (e){
    var curr = $('#second').find('.current');
    if (e.keyCode == 40) {                                      
        if(curr.length) {
                $(curr).attr('class', 'display_box');
                $(curr).next().attr('class', 'display_box current');
        } else {
            $('#second li:first-child').attr('class', 'display_box current');
        }                    
    }
    if(e.keyCode==38) {                                        
        if(curr.length) {                            
                $(curr).attr('class', 'display_box');
                $(curr).prev().attr('class', 'display_box current');
        } else {
            $('#second li:last-child').attr('class', 'display_box current');
        }            
    }
});