Всё тоже самое что у
Ruslan_xDD, только подсказывает любое последнее слово а не только первое и фокус после клика на подсказку возвращается в поле ввода текста -- оба варианта нерабочие в ие < 9
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Input Autocomplete</title>
<style type="text/css">
.AutoComplete {
position: relative;
width: 200px;
}
.AutoComplete > * {
width: 100%;
}
.AutoComplete > ul {
background: #FFF;
border-radius: 10px;
box-shadow: 0 0 10px #000;
display: none;
margin: 5px 0 0 0;
padding: 5px 0;
position: absolute;
}
.AutoComplete li {
display: block;
padding: 0 5px;
}
.AutoComplete li:hover {
background: #AAA;
cursor: pointer;
}
</style>
</head>
<body>
<div class="AutoComplete">
<input type="text" />
<ul></ul>
</div>
<script type="text/javascript">
window.onload = function () {
var data = ['Арбуз', 'Арба', 'Арбалет', 'Апельсин', 'Ананас', 'Банан', 'Виноград', 'Вишня'],
input = document.querySelector('.AutoComplete > input'),
list = input.nextElementSibling;
input['oninput' in input ? 'oninput' : 'onpropertychange'] = function () {
var li,
val = this.value.toLowerCase()
.split(' ')
.pop();
if (val.length < 3) list.style.display = 'none';
else { list.innerHTML = '';
data.forEach(function (i) {
var reg = new RegExp('^'+val, 'i');
if (reg.test(i)) {
li = document.createElement('li');
li.appendChild(document.createTextNode(i))
li.onclick = function () {
input.value = input.value.replace(/\S+$/, i);
input.focus();
list.innerHTML = '';
list.style.display = 'none';
};
list.appendChild(li);
list.style.display = 'block'
}
});
}
}
}
</script>
</body>
</html>