<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<!--
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
.input_form { position:relative; float: left; width:387px; margin-top:10px; height:50px; }
.input_form input{ border: none; position:absolute; display:block; padding:0 5px; width:250px; line-height:23px; height:23px; font-family:Tahoma, Geneva, sans-serif; font-size:15px; background:#d9d9d9;}
.from_help { position:absolute; left:0; top:23px; border:1px solid #d9d9d9; padding:0 4px; width:250px; border-top:none; background:#fff; z-index:2; }
</style>
<script>
$(document).ready(function () {
function like(str) {
var town_from = [
'Альметьевск',
'Москва',
'Армавир',
'Артем',
'Архангельск',
'Астрахань',
'Балаково',
'Барнаул',
'Белгород',
'Березники',
'Бийск',
'Благовещенск',
'Борисоглебск',
'Братск',
'Брянск',
'Буденновск',
'Великий Новгород',
'Владивосток',
'Волгоград',
'Волжский',
'Вологда',
'Воронеж',
'Дзержинск',
'Екатеринбург',
'Иваново',
'Ижевск',
'Иркутск',
'Йошкар-Ола',
'Казань',
'Калининград',
'Каменск-Уральский',
'Кемерово',
'Киров',
'Кострома',
'Краснодар',
'Красноярск',
'Курган',
'Курск',
'Липецк',
'Магнитогорск',
'Миасс',
'Мурманск',
'Набережные Челны'
],
html = '',
str = new RegExp("^" + str, "i");
for (var i = 0; i < town_from.length; i++) {
if (str.test(town_from[i])) html += '<div class="add">' + town_from[i] + '</div>'
}
return html
}
$("#from").on("input", function () {
var val = this.value;
$('#from_help').html(val.length ? like(val) : '')
});
$('#from_help').on('click', '.add', function () {
$("#from").val($(this).text())
$('#from_help').html('');
});
})
</script>
</head>
<body>
<div class="input_form">
<input id="from" type="text" />
<div id="from_help" class="from_help "></div>
</div>
</body>
</html>