JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="autofill"/> Press enter to view items
<div class="services">
    <div class="items">
        <ul>                           
            <li class="mail-icon selected"><a href="#" id="mail">mail</a></li>
            <li class="forum-icon"><a href="#" id="forum">lang</a></li>
            <li class="chat-icon"><a href="#" id="chat">chat</a></li>
        </ul>
    </div>
</div>

CSS

.services {
    display:none;   
}

.services li {
    width: 150px;   
}

.services li.selected {
    background-color: grey;   
}

JavaScript

$("#autofill").keydown(function(e) {
    if (e.keyCode == 13) { // enter
        if ($(".services").is(":visible")) {
            selectOption();
        } else {
            $(".services").show();
        }
        menuOpen = !menuOpen;
    }
    if (e.keyCode == 38) { // up
        var selected = $(".selected");
        $(".services li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) { // down
        var selected = $(".selected");
        $(".services li").removeClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }
});

$(".services li").mouseover(function() {
    $(".services li").removeClass("selected");
    $(this).addClass("selected");
}).click(function() {
    selectOption();
});

function selectOption() {
    $("#autofill").val($(".selected a").text());
    $(".services").hide();
}