JSFiddle - React, Tailwind, and code Playground

HTML

<input id="city" name="city" maxlength="50" autocomplete="off" class="textbox">
<input id="citygeonameid" name="citygeonameid" type="hidden">
<div id="cityresultscontainer">
    <div id="cityresults" style="display: block;">
        <ul id="parent">
        <li data-id="2750053"><a href="#" title="Nijmegen"><strong>Nij</strong>megen, Gelderland</a></li>
        <li data-id="2750065"><a href="#" title="Nijkerk"><strong>Nij</strong>kerk, Gelderland</a></li>
        <li data-id="2750089"><a href="#" title="Nijemirdum"><strong>Nij</strong>emirdum, Friesland</a></li>
        <li data-id="2750098"><a href="#" title="Nijega"><strong>Nij</strong>ega, Friesland</a></li>
        <li data-id="2990366"><a href="#" title="Nijon"><strong>Nij</strong>on, Champagne-Ardenne</a></li>
        <li data-id="2750094"><a href="#" title="Nijehaske"><strong>Nij</strong>ehaske, Friesland</a></li>
        <li data-id="2750104"><a href="#" title="Nij Altoenae"><strong>Nij</strong> Altoenae, Friesland</a></li>
        <li data-id="2750103"><a href="#" title="Nij Beets"><strong>Nij</strong> Beets, Friesland</a></li>
        <li data-id="8449187"><a href="#" title="Nijang"><strong>Nij</strong>ang, Nusa Tenggara Barat</a></li>
        <li data-id="2513222"><a href="#" title="Nijar"><strong>Nij</strong>ar, Andalusia</a></li>
        <li data-id="2750053"><a href="#" title="Nijmegen"><strong>Nij</strong>megen, Gelderland</a></li>
        <li data-id="2750065"><a href="#" title="Nijkerk"><strong>Nij</strong>kerk, Gelderland</a></li>
        <li data-id="2750089"><a href="#" title="Nijemirdum"><strong>Nij</strong>emirdum, Friesland</a></li>
        <li data-id="2750098"><a href="#" title="Nijega"><strong>Nij</strong>ega, Friesland</a></li>
        <li data-id="2990366"><a href="#" title="Nijon"><strong>Nij</strong>on, Champagne-Ardenne</a></li>
        <li data-id="2750094"><a href="#" title="Nijehaske"><strong>Nij</strong>ehaske, Friesland</a></li>
        <li data-id="2750104"><a href="#"...

CSS

.display_box_hover{
        background-color:#901C51;
        font-weight:bold;
        cursor:pointer;
        color:#FFF;     
    display: block;
}

#cityresultscontainer
{
position:relative;}


#cityresults
{
    display:none;
    position:absolute;
    z-index:1;
    width:200px;
    background-color:#FFF;
    -webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;
    -webkit-border-bottom-right-radius:3px;-moz-border-radius-bottomright:3px;border-bottom-right-radius:3px;
    border:1px solid #DDD;
}

    #cityresults span{
        width:192px;
        float:left;
        padding:4px;
        font-weight:bold;
    }

    #cityresults ul
    {
        overflow:auto;
        width:215px;
        height:200px;
        list-style-type:none;
        padding: 0;
    }

    #cityresults li a{
        width:192px;
        float:left;
        padding:4px;
    }
    #cityresults li a:hover{
        text-decoration:none;
        background-color:#901C51;
        font-weight:bold;
        cursor:pointer;
        color:#FFF; 
    }

    #cityresults li:hover{
        background-color:#901C51;
        font-weight:bold;
        cursor:pointer;
        color:#FFF; 
    }



    #cityresults span:hover{
        background-color:#901C51;
        font-weight:bold;
        cursor:pointer;
        color:#FFF; 
    }

JavaScript

$(document).ready(function () {
		var scrolLength = 9;
    window.displayBoxIndex = -1;
    $('#cityresults').on('click', 'a', function () {
        $('#city').val($(this).text());
        $('#cityresults').hide('');
        $('#citygeonameid').val($(this).parent().attr('data-id'));
        return false;
    });
    var Navigate = function (diff) {
        displayBoxIndex += diff;
        var oBoxCollection = $("#cityresults ul li a");
        if (displayBoxIndex >= oBoxCollection.length) {
            displayBoxIndex = 0;                
        }
        if (displayBoxIndex < 0) {
            displayBoxIndex = oBoxCollection.length - 1;             
        }
        var cssClass = "display_box_hover";        
        scrollUL();        
        oBoxCollection.removeClass(cssClass).eq(displayBoxIndex).addClass(cssClass);        
    }
    $(document).on('keypress keyup', function (e) {
        if (e.keyCode == 13 || e.keyCode == 32) {
            $('.display_box_hover').trigger('click');
            return false;
        }
        if (e.keyCode == 40) {
            //down arrow
            Navigate(1);
        }
        if (e.keyCode == 38) {
            //up arrow
            Navigate(-1);
        }
    });
   	function scrollUl(){
        if(window.event.keyCode == 40){
            document.getElementById("parent").scrollTop = scrolLength;
            scrolLength = scrolLength + 19;  
        }           
        else if(window.event.keyCode == 38){            
            scrolLength = scrolLength - 19;  
            document.getElementById("parent").scrollTop = scrolLength;
            
        }
    }
});