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) {
        $('.current').removeClass("current").next().addClass('current');
    }
    if (e.keyCode == 38) {
        $('.current').removeClass("current").prev().addClass('current');
    }

});