JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <input class="input" type="text" placeholder="Кликните для выбора">
</div>

CSS

.input {
  padding: 7px;
}

.item {
    padding: 5px;
}

.list {
    display: block;
    position: absolute;
    background: #fff;
    box-shadow: 0 0 12px #9B9B9B;
    top: 39px;
    width: 339px;
    border: 1px solid #9B9B9B;
    overflow-y: scroll;
}

.container {
  position: relative;
}

JavaScript

var city = ['Киев', 'Новосибирск', 'Санкт-Петербург', 'Рига', 'Токио', 'Москва'];
var list = {};
var drew = false;



    $(".input").on("click", function(event) {
        if(drew == false){
            //Создаем список для вывода
            $(".input").after('<div class="list"></div>');

            //Начать вывод
            drew = true;
            //Рисует элементы из списка
            
            $(".list").on("click", "div", function(){
                $(".input").val($(this).text());
                $(".list").empty();
                $(".list").remove();
                drew = false;
            });
            
        }
        for(list in city){
                $(".list").append("<div class='item'>" + city[list] + "</div>");
            }

    });