JSFiddle - React, Tailwind, and code Playground

HTML

<input id= "username" name="username" type="text" size="16" />

<div class="suggestionsBox" id="suggestions" style="display: none;">
    <img src="images/upArrow.png" style="position: relative; top: -12px; left: 30px;" alt="upArrow" />
    <div class="suggestionList" id="autoSuggestionsList">
        &nbsp;
    </div>
</div>

JavaScript

$( function
{
    var $suggestions = $( '#suggestions' );

    $( '#username' )
        .bind( 'keyup', function()
        {
            var username= $( this ).val();

            if( ! username )
            {
                $suggestions.hide();
            }
            else
            {
                $.post(
                    ',
                    {
                        queryString: username
                    },
                    function( data )
                    {
                        if( data.length > 0 )
                        {
                            $suggestions.show();
                            $( '#autoSuggestionsList' ).html( data );
                        }
                    }
                );
            }
        } )
        .bind(  'blur', function()
        {
            $( this ).val( '' );
            window.setTimeout( function()
            {
                $suggestions.hide();
            }, 200 );
        } );
}