выпадающее меню после ввода в поле
Ребят, помогите! :help:
Хотелось бы сделать, чтобы после ввода трех букв в поле input-text ниже выпадало меню (с вариантами слов/предложений, это не важно уже, главное чтобы выпадало :) ) эти варианты берутся из php скрипта. Есть какие идеи, как это можно реализовать? :-? что не понятно - спрашивайте ;) P.S. Помогите, я в этом новичок... много чего не знаю и не понимаю... |
Это называется autocomplete. Есть в различных библиотеках: jQuery UI, Bootstrap, etc.
|
Сделал небольшой набросок за полчаса :)
<!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> |
: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_xDD,
поправил больше бананов к ананасам не будет -- ранее делал любое вхождение - сейчас только совпадение по началу |
Цитата:
|
ufo,
после первого слова сделайте пробел и начните новое слово - скрипт попробует подобрать похожее слово из своей базы -- вариант Ruslan_xDD, расчитан только на ввод 1 слова все последущие оставит без внимания. так понятнее? |
Да, спасибо, понятнее, но у меня что-то на втором слове не предлагает варианты...
|
Упс... Прошу прощения, сейчас заработало...
Но мне маленько другое нужно. Допустим, я ввожу слово/словосочетание/предложение и эта строка отправляется на скрипт 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; } }; } что то вроде этого надо "впендюрить" вместо готового списка |
главный вопрос: куда это "впендюрить", так чтобы список подгружался динамически?
|
Цитата:
Цитата:
|
где этот третий пост?
|
|
Цитата:
как я понимаю там тоже самое что в первых примерах. список из массива... |
Цитата:
|
Часовой пояс GMT +3, время: 09:29. |