вот моя еще одна версия, честно сказать она мне больше понравилась))
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Example</title>
<style>
.list {
position: absolute;
background-color: white;
margin: 5px 0px 5px 0px;
border: 1px solid black;
z-index: 5000;
width: 200px;
}
.list div:hover {
background-color: yellow;
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" value="234" onfocus="f(this);" onclick="event.stopPropagation();">
<div class="list" onclick="s(this, event)" style="display: none;">
<div>111111</div>
<div>222222</div>
<div>333333</div>
</div>
<script>
var menu = document.querySelector('.list'),
input = document.querySelector('input');
function f (ths) {
menu.style.display = 'block';
window.onclick = function () {
menu.style.display = 'none';
}
}
function s (ths, event) {
var v = event.target.innerHTML;
input.value = v;
if (v == '222222')
return;
ths.style.display = 'none';
event.stopPropagation();
}
</script>
</body>
</html>
п.с. конечно урезанал, но думаю кому надо суть поймет