Форум

ufo · #1 (**permalink**) 11.11.2013, 00:23

Ребят, помогите!

Хотелось бы сделать, чтобы после ввода трех букв в поле input-text
ниже выпадало меню (с вариантами слов/предложений, это не важно уже,
главное чтобы выпадало

) эти варианты берутся из php скрипта.
Есть какие идеи, как это можно реализовать?

что не понятно - спрашивайте

P.S. Помогите, я в этом новичок... много чего не знаю и не понимаю...

BETEPAH · #2 (**permalink**) 11.11.2013, 01:29

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

ruslan_mart · #3 (**permalink**) 11.11.2013, 14: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>

рони · #4 (**permalink**) 11.11.2013, 15:44

Всё тоже самое что у 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 · #5 (**permalink**) 11.11.2013, 15:59

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

рони · #6 (**permalink**) 11.11.2013, 16:22

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

ufo · #7 (**permalink**) 19.11.2013, 21:30

Сообщение от рони

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

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

рони · #8 (**permalink**) 19.11.2013, 21:56

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

ufo · #9 (**permalink**) 19.11.2013, 22:37

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

ufo · #10 (**permalink**) 19.11.2013, 22:55

Упс... Прошу прощения, сейчас заработало...
Но мне маленько другое нужно. Допустим, я ввожу слово/словосочетание/предложение и эта строка отправляется на скрипт php (как я понимаю ajax с POST) который в бд ищет эти совпадения, и выводит уже в формате XML или JSON (не знаю что лучше, может еще что то...) Далее js выцепляет и выводит в список

код ajax который нагуглил и повыкидывал лишнее

function XmlHttp() {
    var xmlhttp;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch(e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (E) {
             xmlhttp = false;
        }
    }
    if (!xmlhttp && typeof XMLHttpRequest!='undefined')
    {
     xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
 

function ajax() {

var area1 = document.getElementById("area_1").value;
var area2 = document.getElementById("area_2").value;

if (window.XMLHttpRequest) req = new XmlHttp();

send="name_area="+area1+"&message_area="+area2;

req.open("POST", "autonew_post_do.php", true);
if("status")document.getElementById("status").innerHTML = '<img src="ajax-loader.gif">';
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send(send);
req.onreadystatechange = function()
            {
                if (req.readyState == 4 && req.status == 200) //если ответ положительный
                {
                    document.getElementById("status").innerHTML=req.responseText;
                }
            };
}

что то вроде этого надо "впендюрить" вместо готового списка

Форум

Справочник

Discord чат

Курсы javascript