Показать сообщение отдельно
  #5 (permalink)  
Старый 11.11.2013, 15:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064


Всё тоже самое что у 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>

Последний раз редактировалось рони, 11.11.2013 в 16:19.
Ответить с цитированием