JSFiddle - React, Tailwind, and code Playground

HTML

<div id="search_container">
    <input id="search_imput" type="text" autocomplete="off" />
    <ul id="search_result_list">
        <li>result 1</li>
        <li>result 2</li>
        <li>result 3</li>
    </ul>
</div>
<div id="result_container">no result
</div>

CSS

#search_container {
    width: 150px;
    height: 20px;
    background: #ffb;
    border: 2px solid #999;
}

li {
    margin: 10px;
    background: #fbb;
    border: 2px solid #999;
}

#result_container {
    position: relative;
    top: 180px;
    background: #bbb;
    border: 2px solid #999;
}

JavaScript

$(function() {
    $('#search_imput').focus(function() {
        $('#search_result_list').show();
    });


    $('#search_imput').blur(function() {
        setTimeout(function(){
            $('#search_result_list').hide();
        }, 100);
    });

    //works only if focusout of '#search_imput' is commented
    $('#search_result_list').children('li').click(function() {
        //display_selected_user_info:
        $('#result_container').text($(this).text());
    });
});