failoflife,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/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;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var city = ['Киев', 'Новосибирск', 'Санкт-Петербург', 'Рига', 'Токио', 'Москва'];
var sel;
$(".input").on("click", function(event) {
if (!sel) {
var self = this;
sel = $('<div class="list"></div>').insertAfter(self);
sel.on("click", ".item", function() {
self.value = this.innerHTML;
sel.slideUp()
})
$.each(city, function(indx, text) {
$("<div/>", {
"class": "item",
text: text
}).appendTo(sel)
});
$(document).click(function(event) {
if (!$(event.target).closest(".list, .input").length) sel.slideUp()
})
}
sel.slideDown()
}).on("input", function() {
sel.slideUp()
});
});
</script>
</head>
<body>
<div class="container">
<input class="input" type="text" placeholder="Кликните для выбора">
</div>
</body>
</html>