JSFiddle - React, Tailwind, and code Playground

HTML

<div class="searchbar">
    <input type="text" id="searchInput" name="searchInput" value="try using arrow down">                           
    </input>
</div>
<div class="searchresult">
    <ul>
        <li tabindex="1" class="result">Result 1</li>
        <li tabindex="2" class="result">Result 2</li>
        <li tabindex="3" class="result">Result 3</li>
        <li tabindex="4" class="result">Result 4</li>
        <li tabindex="5" class="result">Result 5</li>
        <li tabindex="6" class="result">Result 6</li>
        <li tabindex="7" class="result">Result 7</li>
        <li tabindex="8" class="result">Result 8</li>
        <li tabindex="9" class="result">Result 9</li>
    </ul>
</div>

CSS

.searchbar {
    background-color: gray; 
    padding: 5px
}
.searchresult {
    background-color: lightgray; 
    max-height: 100px; 
    overflow: auto;}
ul {
    padding: 0px;
    margin: 0px;
}
li {
    list-style-type: none; 
    outline: none;
    padding: 5px;
    display: list-item; 
}
.active {
    background-color: lightblue;
}

JavaScript

$('#searchInput').keydown(function(e) {
    if (e.keyCode==40) {
        $('li:first').focus();
    }
});

$('div.searchresult').on('focus', 'li', function() {
    $this = $(this);
    $this.addClass('active').siblings().removeClass('active');
}).on('keydown', 'li', function(e) {
    $this = $(this);
    if (e.keyCode == 40) {        
        $this.next().focus();
        return false;
    } else if (e.keyCode == 38) {        
        $this.prev().focus();
        return false;
    }
});

document.getElementById("searchInput").focus();