JSFiddle - React, Tailwind, and code Playground

HTML

<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>
<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>
<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>
<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>
<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>
<div class='search_result'>1</div>
<div class='search_result'>2</div>
<div class='search_result'>3</div>

CSS

.search_result {
    color: #fff;
    background: #000;
    width: 250px;
    height: 30px;
    margin-top: 2px;
}
.search_result_current {
    background: olive;
}

JavaScript

// -------------------------------------------
$(document).on('keydown', function (e) {
    var keyCode = e.keyCode || e.which,
        arrow = {
            up: 38,
            down: 40
        };
    if (keyCode == arrow.up || keyCode == arrow.down) {
        e.preventDefault ? e.preventDefault() : (e.returnValue = false);
    }

    switch (keyCode) {
        case arrow.up:
            goToSuggestion(-1);
            break;
        case arrow.down:
            goToSuggestion(1);
            break;
    }
});

// ---------------------------------------------

var cur = -1;

goToSuggestion = function (iDiff) {
    var cSuggestionNodes = $('.search_result');

    if (cSuggestionNodes.length > 0) {
        var oNode = null;

        if (iDiff > 0) {
            if (cur < cSuggestionNodes.length - 1) {
                oNode = cSuggestionNodes[++cur];
            }
        } else {
            if (cur > 0) {
                oNode = cSuggestionNodes[--cur];
            }
        }

        if (oNode) {
            highlightSuggestion(oNode);
        }
    }
}

// ---------------------------------------------

highlightSuggestion = function (oSuggestionNode) {
    var layer = $('.search_result');

    layer.each(function () {
        var oNode = $(this);
        if (oNode.get(0) == $(oSuggestionNode).get(0)) {
            oNode.addClass("search_result_current");
        } else if (oNode.hasClass("search_result_current")) {
            oNode.removeClass("search_result_current");
        }
    });

}

// -------------------------------------------------