JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

.input {
  padding: 7px;
}

.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 drew = false;

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

            //Начать вывод
            drew = true;
            //Рисует элементы из списка
            $(".input").on(function(){
                $(".input").val(city);
                $(".list").empty();
            });
        }
    });