JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <strong>Erstellt von:</strong><br />
    <input type="text" id="ipt2" name="bearbeiter" value="" onClick="drop('2','','open');" onBlur="drop('2','','close');" />
</p>
     
<ul id="dl2" class="datalist">
    <li onClick="drop('2','Max Mustermann','');">Max Mustermann</li>
    <li onClick="drop('2','Axel Springer','');">Axel Springer</li>
    <li onClick="drop('2','John Doe','');">John Doe</li>
</ul>

<script>
function drop(id,val,opt)
{
var elem = document.getElementById("dl" + id);
if(opt == "open")
{
elem.style.display = "block";
}
else if (opt == "close")
{
setTimeout(function () { elem.style.display = "none"; }, 300);
}
else
{
document.getElementById("ipt" + id).value = val;
}
}
</script>

CSS

* { font-family: Arial, Helvetica, sans-serif; }
 
ul.datalist {
border: 1px solid #CCC;
width: 200px;
box-shadow: 0 0 5px #DDD;
position: absolute;
z-index: 1;
margin-top: -17px;
padding: 0;
display: none;
background: #FFF;
font-size: 0.9em;
}
ul.datalist li {
display: block;
margin: 0;
list-style-type: none;
cursor: pointer;
padding: 5px;
border-bottom: 1px solid #EEE;
}
ul.datalist li:hover {
background-color: #C00;
color: #FFF;
}