JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" value="" />
<br />
<div id="suggestions">
    <div>Toronto</div>
    <div>Seattle</div>
    <div>Dallas</div>
</div>

CSS

#search, #suggestions { width: 200px; }
#suggestions { 
    display: none; 
    border: 1px solid gray;
    border-top: none;
}
#suggestions div:hover { 
    background-color: #99CCFF; 
}

JavaScript

$('#search').focus(function() {
    $('#suggestions').slideDown();
});

$('#search').blur(function() {
        $('#suggestions').slideUp();
});

$('#suggestions div').click( function() {
    $('#search').val($(this).html());
    $('#suggestions').slideDown();
    $('#search').focus();
});