JSFiddle - React, Tailwind, and code Playground

by gschutz

HTML

<input>
<div id="resultado">
    <div>Roberto</div>
    <div>Renata</div>
    <div>Julia</div>
    <div>Andreas</div>
    <div>Tulio</div>
</div>

CSS

.linhaSelecionada{
    background-color: #aaa;
}

JavaScript

var linhaSelecionada = 0;
var ultimaLinha = $("#resultado div").length;
console.log(ultimaLinha);

$("input").keydown(function(e){
    local = $("#resultado");
    ultimaLinha = $("#resultado div").length;
	if( e.which == 38 ){    // Up
		selecionaLinhaAnterior(local);
		e.preventDefault();
	} else if( e.which == 40 ){   // Down		
		selecionaProximaLinha(local);
	} else if( e.which == 13 ){   // Enter	
		e.preventDefault();
	} else {
       // selecionaProximaLinha(local);
	}	
});

function selecionaProximaLinha(local){
    if( $("div.linhaSelecionada").length == 0 ){
        selecionaLinha(local.find("div").eq(0)); 
    }else {
        if( linhaSelecionada < ultimaLinha-1 )
            selecionaLinha(local.find("div").eq(linhaSelecionada+1));  
        else
            selecionaLinha(local.find("div").eq(0));  
    }
}
function selecionaLinhaAnterior( local ){
    if( linhaSelecionada <= ultimaLinha-1 )
        selecionaLinha(local.find("div").eq(linhaSelecionada-1));  
    else
        selecionaLinha(local.find("div").eq(ultimaLinha-1));  
}
function selecionaLinha( obj ){
	$("div.linhaSelecionada").removeClass("linhaSelecionada");
	obj.addClass("linhaSelecionada");
	linhaSelecionada = obj.index();
    c