Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2013, 22:23
ufo ufo вне форума
Интересующийся
Отправить личное сообщение для ufo Посмотреть профиль Найти все сообщения от ufo
 
Регистрация: 04.11.2013
Сообщений: 15

выпадающее меню после ввода в поле
Ребят, помогите!
Хотелось бы сделать, чтобы после ввода трех букв в поле input-text
ниже выпадало меню (с вариантами слов/предложений, это не важно уже,
главное чтобы выпадало ) эти варианты берутся из php скрипта.
Есть какие идеи, как это можно реализовать?
что не понятно - спрашивайте
P.S. Помогите, я в этом новичок... много чего не знаю и не понимаю...
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2013, 23:29
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

Это называется autocomplete. Есть в различных библиотеках: jQuery UI, Bootstrap, etc.
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2013, 09:33
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,479

jQuery UI Autocomplete
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2013, 12:15
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

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

<!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>
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2013, 13:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,152


Всё тоже самое что у 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 в 14:19.
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2013, 13:59
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 2,932

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

Ответить с цитированием
  #7 (permalink)  
Старый 11.11.2013, 14:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,152

Ruslan_xDD,
поправил больше бананов к ананасам не будет --
ранее делал любое вхождение - сейчас только совпадение по началу
Ответить с цитированием
  #8 (permalink)  
Старый 19.11.2013, 19:30
ufo ufo вне форума
Интересующийся
Отправить личное сообщение для ufo Посмотреть профиль Найти все сообщения от ufo
 
Регистрация: 04.11.2013
Сообщений: 15

Сообщение от рони
только подсказывает любое последнее слово а не только первое
что то я не совсем понял это...
Ответить с цитированием
  #9 (permalink)  
Старый 19.11.2013, 19:56
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,152

ufo,
после первого слова сделайте пробел и начните новое слово - скрипт попробует подобрать похожее слово из своей базы -- вариант Ruslan_xDD, расчитан только на ввод 1 слова все последущие оставит без внимания. так понятнее?
Ответить с цитированием
  #10 (permalink)  
Старый 19.11.2013, 20:37
ufo ufo вне форума
Интересующийся
Отправить личное сообщение для ufo Посмотреть профиль Найти все сообщения от ufo
 
Регистрация: 04.11.2013
Сообщений: 15

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Находится ли мышка над дивом ? (выпадающее меню) advsm jQuery 31 24.09.2014 16:50
Как ввести в поле ввода значение где есть javascript MOZG Общие вопросы Javascript 8 19.04.2013 09:28
jquery ui layout + выпадающее меню Sveta jQuery 2 04.12.2012 07:04
Выпадающее меню CyMKuH Элементы интерфейса 4 09.08.2012 20:03
Выпадающее меню для внутренней навигации по закладкам на странице на javascript+css rdfhnbhf Javascript под браузер 1 13.07.2012 11:26