JSFiddle - React, Tailwind, and code Playground

HTML

<p>type something</p>
<input type="text" id="myinput">
<div id="myresults"></div>

CSS

ul {list-style: none; border: 1px solid #000; width: 150px; margin: 0; padding: 0;}
ul li {cursor: pointer;}
ul li:hover {background: #cecece;}

JavaScript

$("#myinput").on('keyup', function() {
    var html = '<ul><li>example 1</li><li>example 2</li><li>example 3</li><ul>';
    $('#myresults').html(html).show();
});

$(document).on('blur', "#myinput", hideResult);

$(document).on('mousedown', "#myresults ul li", function(){
     $(document).off('blur', "#myinput", hideResult); //unbind the handler before updating value
     $("#myinput").val($(this).html()).blur(); //make sure it does not have focus anymore
     hideResult(); 
     $(document).on('blur', "#myinput", hideResult);  //rebind the handler if needed
     
});

function hideResult() {
     $("#myresults").hide();
    $('#myinput').focus();
}