JSFiddle - React, Tailwind, and code Playground

HTML

<textarea id="message_board"></textarea>
<div id="userlist_container">
    <ul>
        <li id="oneli" class="hovered">
            <a href="">
                <div>Value1 Value1</div>
            </a>   
        </li>
        <li id="onetwo">
            <a href="">
                <div>Value2 Value2</div>
            </a>   
        </li>
        <li id="onethree">
            <a href="">
                <div>Value3 Value3</div>
            </a>   
        </li>
    </ul>
</div>

CSS

#userlist_container ul {
    width: 396px;
    font-size: 13px;
    border: 1px solid #CCC;
    list-style: none;
    padding: 2px;
    margin: 0;
    float: left;
    cursor: default;
    color: #333;
    line-height: 25px;
}

#userlist_container li {
}

#userlist_container a {
    display: block;
    font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif;
    color: #333;
    text-decoration: none;
    cursor:hand;
}

.hovered {
    background-color: #179ECA;
    color: #FFFFFF;
}

JavaScript

$(document).ready(function() {
    $("#userlist_container").hide();
    $('#message_board').keyup(function(e) {
        $("#userlist_container").show();
        var code = e.keyCode || e.which;

        if ((code != 32) && (code != 40) && (code != 38) && (code != 13)) //Deactivate on space
        {
            //Do something
        }
        else if (code === 40) { //Down arrow
            if($("li.hovered").index()==$("li").length-1) return;
            if (!$("li.hovered")) { //if no li has the hovered class
                $("#userlist_container li").eq(0).addClass("hovered");
            } else {
                $("li.hovered").eq(0).removeClass("hovered").next().addClass("hovered");
            }
        }
        else if (code === 38) { //Up arrow
            if($("li.hovered").index()==0) return;
            if (!$("li.hovered")) { //if no li has the hovered class
                $("li.hovered").eq(0).removeClass("hovered");
            } else {                 $("li.hovered").eq(0).removeClass("hovered").prev().addClass("hovered");
            }
        }
        else if (code === 13) {
            e.preventDefault();
            if ($("li.hovered").length > 0) {
                $("#message_board").val($("li.hovered div").text());
            }
        }
    });
    $("#userlist_container li").hover(function () {
        $('li.hovered').removeClass('hovered');
        $(this).addClass("hovered");
    }, function () {
        // $(this).removeClass("hovered");
    });    
});