JSFiddle - React, Tailwind, and code Playground

HTML

<input id="TextBox" value="search text" />
<br>
<div id="ResultsDIV" style="display:none;">
    <a href="#" onClick="alert('result clicked');">search result</a>
</div>

CSS

#TextBox
{
    width: 150px;
}
#ResultsDIV
{
    width: 150px;
    border: 1px solid black;
}

JavaScript

var resultsSelected = false;
$("#ResultsDIV").hover(
    function () { resultsSelected = true; },
    function () { resultsSelected = false; }
);

$("#TextBox").blur(function () {
    if (!resultsSelected) {  //if you click on anything other than the results
        $("#ResultsDIV").hide();  //hide the results
    }
});

$("#TextBox").focus(function () {
        $("#ResultsDIV").show();
});