JSFiddle - React, Tailwind, and code Playground

by yomoore

HTML

<input type="text" id="search" name="search_fld"/>
<div id="display">
<div class="display_box current">Luca</div>
<div class="display_box">David</div>
<div class="display_box">Mark</div>
<div class="display_box">...</div>
</div>

CSS

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

JavaScript

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


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