JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="inputCidade" placeholder='Nome da cidade'/>
<div class="cidades">
    <div class="itens">
        <ul>                           
            <li class='selected'><a href="#">Belo Horizonte</a></li>
            <li><a href="#">Recife</a></li>
            <li><a href="#">Rio de Janeiro</a></li>
            <li><a href="#">São Paulo</a></li>
        </ul>
    </div>
</div>

CSS

.cidades li {
    width: 150px;   
}

.cidades li.selected {
    background-color: green;   
}

JavaScript

$("#inputCidade").keydown(function(e) {
    if (e.keyCode == 13) { // enter
        if ($(".cidades").is(":visible")) {
            opcaoEscohida();
        } else {
            $(".cidades").show();
        }
        menuOpen = !menuOpen;
    }
    if (e.keyCode == 38) { // pra cima
        var selected = $(".selected");
        $(".cidades li").removeClass("selected");
        if (selected.prev().length == 0) {
            selected.siblings().last().addClass("selected");
        } else {
            selected.prev().addClass("selected");
        }
    }
    if (e.keyCode == 40) { // pra baixo
        var selected = $(".selected");
        $(".cidades li").removeClass("selected");
        if (selected.next().length == 0) {
            selected.siblings().first().addClass("selected");
        } else {
            selected.next().addClass("selected");
        }
    }
});
function opcaoEscohida() {
    $("#inputCidade").val($(".selected a").text());
    $(".cidades").hide();
}