JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" name="suggest" class="autosuggest1">
   <div class="dropdown">
        <ul class="result1">
            <li>--Select one--</li>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>

CSS

.selected {
    background: #faa;
}

JavaScript

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) { 
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++; 
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        var result = $('li:eq('+chosen+')').text();
        $('.autosuggest1').val(result);  
        return false;
    }
    if (e.keyCode == 38) { 
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;            
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        var result = $('li:eq('+chosen+')').text();
        $('.autosuggest1').val(result);  
        return false;
    }
});