JSFiddle - React, Tailwind, and code Playground

HTML

<div class="quickFind">Quick Find: <input type="text" name="globalFind" id="globalFind" /></div>
<div id="globalFindResults"></div>
<div>
    <p>
        This is some random text that will be hidden when the search box has slid down.</p>
</div>

CSS

#globalFindResults {
    z-index:99999; 
    position:absolute;
    background-color:#fff; 
    border:1px solid #000; 
    width:400px; 
    max-height:250px; 
    overflow:scroll;
    display:none;
}

JavaScript

$("#globalFind").keyup(function() {

    if ($(this).val().length < 1) {

        $("#globalFindResults").slideUp('fast');

    } else {

        $.ajax({
            url: '/echo/html/',
            data: {
                search: $(this).val()
            },
            success: function(data) {
                $("#globalFindResults").html('<p>Various Ajax results here</p>');
                $("#globalFindResults").slideDown('fast');
            }
        });
    }

});