JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text">
<ul>
    <li>Spam</li>
    <li>Ham</li>
    <li>Eggs</li>
</ul>

CSS

input {
    box-sizing: border-box;
    width: 150px;
}

ul {
    display: none;
    font: 12px sans-serif;
    margin: 0;
    padding: 0;
    width: 150px;
}

li {
    background-color: #eee;
    border-bottom: 1px solid #fff;
    cursor: pointer;
    display: block;
    padding: 3px;
}

li:hover {
    background-color: #ddd;
}

JavaScript

$('input').on('focus', function() {
    $('ul').show();
}).on('blur', function() {
    $('ul').hide();
});

$('ul').on('mousedown', function(event) {
    event.preventDefault();
}).on('click', 'li', function() {
    $('input').val(this.textContent).blur();
});