Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   выпадающее меню после ввода в поле (https://javascript.ru/forum/misc/42817-vypadayushhee-menyu-posle-vvoda-v-pole.html)

ufo 10.11.2013 22:23

выпадающее меню после ввода в поле
 
Ребят, помогите! :help:
Хотелось бы сделать, чтобы после ввода трех букв в поле input-text
ниже выпадало меню (с вариантами слов/предложений, это не важно уже,
главное чтобы выпадало :) ) эти варианты берутся из php скрипта.
Есть какие идеи, как это можно реализовать? :-?
что не понятно - спрашивайте ;)
P.S. Помогите, я в этом новичок... много чего не знаю и не понимаю...

BETEPAH 10.11.2013 23:29

Это называется autocomplete. Есть в различных библиотеках: jQuery UI, Bootstrap, etc.

Rise 11.11.2013 09:33

jQuery UI Autocomplete

ruslan_mart 11.11.2013 12:15

Сделал небольшой набросок за полчаса :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<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();
			
		if(val.length < 3) list.style.display = 'none';
		else data.forEach(function(i) {
			if(!i.toLowerCase().indexOf(val)) li += '<li>' + i + '</li>';
		});
		
		if(li) {
			list.innerHTML = li;
			list.style.display = 'block';
		}
		else list.style.display = 'none';
	}
	
	list.onclick = function(e) {
		e = e || window.event;
		e = e.target || e.srcElement;
		if(e.tagName == 'LI') {
			input.value = e.textContent;
			this.style.display = 'none';
		}
	}
}
</script>
</body>
</html>

рони 11.11.2013 13:44

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

ruslan_mart 11.11.2013 13:59

рони, похоже ты что-то упустил :)


рони 11.11.2013 14:22

Ruslan_xDD,
поправил больше бананов к ананасам не будет --
ранее делал любое вхождение - сейчас только совпадение по началу

ufo 19.11.2013 19:30

Цитата:

Сообщение от рони
только подсказывает любое последнее слово а не только первое

что то я не совсем понял это...

рони 19.11.2013 19:56

ufo,
после первого слова сделайте пробел и начните новое слово - скрипт попробует подобрать похожее слово из своей базы -- вариант Ruslan_xDD, расчитан только на ввод 1 слова все последущие оставит без внимания. так понятнее?

ufo 19.11.2013 20:37

Да, спасибо, понятнее, но у меня что-то на втором слове не предлагает варианты...


Часовой пояс GMT +3, время: 04:16.