$(document).on('mousedown', '#inputMenu li', function (e) {
$('#input').val($(this).text());
$('#inputMenu').removeClass('active');
e.preventDefault();
return false
});
$('#input').on('focusout',function(e) {
$('#inputMenu').removeClass('active');
});
$('#input').on('input',function(e) {
$('#inputMenu').addClass('active');
});
#inputMenu {
display: none;
}
#inputMenu.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="input" type="text" placeholder="type something">
<ul id="inputMenu">
<li>Click me to set text 1</li>
<li>Click me to set text 2</li>
<li>Click me to set text 3</li>
<li>Click me to set text 4</li>
</ul>