JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" id="search" value="" />
<br />
<div id="suggestions">
    <div id="field">Toronto</div>
    <div id="field">Seattle</div>
    <div id="field">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').show();
});

$('*').click(function(e) {
    if(e.target.id != 'search' && e.target.id != 'field') {
        $('#suggestions').hide();
    }
});

$('#suggestions div').click( function() {
    $('#suggestions').stop(true,true).show();
    $('#search').val($(this).html());
});