Форум

dmitriymar · #11 (**permalink**) 12.09.2011, 13:29

Триви,
судя по всему он в конечном итоге подобное яндекс поиску и т.д собирается сделать-по этому сразу стоит завязку по полной делать.

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

При onBlur input'а <div> должен пропадать, но он не должен пропадать когда кликаешь по ссылки из <div>

когда ты кликаеш за пределами инпута -на туже ссылку-у тебя по любому возникает событие потери фокуса инпута.

у тебя ведь последовательность-если событие клика происходит в любом элементе, кроме инпута или дива с его содержимым, то скрывать див
поэтому тебе не блур нужно отслеживать а все клики кроме перечисленных.
И обработчик у тебя будет клик на боди

запретить всплытие
если событие клика возникло не в инпуте или контейнере содержащем его и не в диве с сылками(проверка по id по классу) то скрыть див.

как вариант -
положить их в общий контейнер и если событие клика не в нём. то скрыть див с сылками

Триви · #12 (**permalink**) 12.09.2011, 13:30

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

У меня там нет селекта, в <div> появляются ссылки, по нажатию их содержимое переноситься в input. При onBlur input'а <div> должен пропадать, но он не должен пропадать когда кликаешь по ссылки из <div>

тогда смотри свойсто innerHTML для тега <A>

shilinpavel · #13 (**permalink**) 12.09.2011, 13:32

Цитата:

но не лучший вариант вводи индикатор а лучший отслеживай на каком элементе был перед этим.

А как это сделать?

Вот мой код:

<!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>Документ без названия</title>
<script type="text/javascript" charset="windows-1251">
            var lnbox = {
	                // Ссылка на DOM элемент поля ввода
	                lninput: null,
	                // Ссылка на DOM элемент всплывающего div'а
	                lnelement: null,
	 
	                // Массив полученных фамилий
	                lastnames: new Array(),
	                 
	                // Объект XmlHttpRequest, для передачи данных (ajax)
	                httpreq: window.XMLHttpRequest ? 
	                        new XMLHttpRequest() : 
	                        new ActiveXObject("Microsoft.XMLHTTP"),
	             
	             
            // Функция инициализации (выполняется по загрузке body)
	            init: function() {
	                // Устанавливаем ссылку на форму ввода
	                this.lnelement = document.getElementById('lastnamebox');
	                 
	                // Устанавливаем ссылку на вслывающий div
	                this.lninput   = document.getElementById('lastnameinput');
	                 
	                // Устанавливаем обработчик событий нажатой (точнее отпущенной)
	                // клавиши на форму ввода
	                this.lninput.onkeyup = function(e) {
	                    lnbox.process(e);
	                }
	                 
	                // Устанавливаем обработчик ответа сервера
	                this.httpreq.onreadystatechange = function() {
	                    if (lnbox.httpreq.readyState == 4) 
	                          lnbox.updateBox(lnbox.httpreq.responseText);
                }
	            },
	             
	             
	            // Функция запроса на сервер, параметр text - текст из поля ввода
	            requestUpdate: function(text) {
                // Посылаем методом GET
	                this.httpreq.open("GET", 'http://mysite.ru/php_script/connectToMysql.php?text='+ text +'&rand='+ Math.random());
	                     this.httpreq.send(null);
	            },
	             
	             
	            // Функция обновления div'а с фамилиями, вызывается при ответе
	            // с сервера, т.е обработчик ответа
	            updateBox: function(answer) {
	                // Полученный ответ парсим в js массив (подробнее читай JSON)
	                this.lastnames = eval(answer);
                 
	                // Если пустой ответ - выходим из функции
	                if(this.lastnames.length <= 0) return false;
	                 
	                // Показываем div
	                this.lnelement.style.display = 'block';
                 
	                // Отчищаем элемент от содержания
	                this.lnelement.innerHTML = "";  
					
	                // Проходим циклом по массиву фамилий
	                for(var i = 0; i < this.lastnames.length; i++)
                {
	                    // Создаем элемент - тег <a>
	                    var lnkdiv = document.createElement('div');
                     
	                    // Устанавливаем содержанием текущую фамилию
	                    lnkdiv.innerHTML = this.lastnames[i];
						                   
	                    // Ставим событие при щелчке на ссылку изменяется
	                    // текст в форме ввода
	                    lnkdiv.onclick = function() {
	                        lnbox.lninput.value = this.innerHTML;
	                         
	                        // Прячем div
	                        lnbox.lnelement.innerHTML = '';
	                        lnbox.lnelement.style.display = 'none';
	                    }
                     
	                    // Присоединяем элемент к div'у с ссылками
	                    this.lnelement.appendChild(lnkdiv);
	                }
            },
	             
	             
	            // Функция обработки события нажания (точнее отпускания) клавиши
	            // на поле ввода
	            process: function(event) {
	                var key = window.event ? window.event.keyCode : (event.keyCode ? event.keyCode : (event.which ? event.which : null))                
                     
	                  // Если введено меньше 2х символов не обрабатываем
	                  if(this.lninput.value.length > 4)
                     this.requestUpdate(this.lninput.value);
                }
            }
			
				
			
            </script>
</head>
<body>
        <style>
	            #lastnamebox {
                position: absolute;
	                display: none;
                width: 180px;
	                margin-top: 2px;
					padding:5px;
	                border: 1px solid #;
	                background: #F1F1F1;
	            }
	             
	            #lastnamebox div
				{
				display: block;
	            padding: 5px 0 5px 15px;
                color: #000000;
                font-size: 12px;
				}
				
	            #lastnamebox div:hover 
				{
					background-color:#666666;
	            }
	             
	            #lastnamebox a:hover {
	                text-decoration: none;
	                background: #FAFAFA;
	                color: #666666;
	            }
	        </style>
	    </head>
	    <body onLoad="lnbox.init()">
	        <input id="lastnameinput" on onblur="hide()" type="text" size="30" />
	        <div id="lastnamebox"></div>
</body>
</html>

dmitriymar · #14 (**permalink**) 12.09.2011, 13:39

shilinpavel,
посмотри моё последнее сообщение-там лучший вариант описан. а ссылку на статью по событиям и обработчикам я тебе дал вчера-выйдет у тебя строк 10 докучи по этому алгоритму и использовании методов Dom2 описанных в статье

А вообще ,вижу что ты делаешь то что я предполагал-посмотри на форуме-ктото уже выкладывал реализацию подобного.
и делай сразу через селект-ты ведь сожержимое в аякс ответе для него будешь получать-селект тебе страницу не порвёт

shilinpavel · #15 (**permalink**) 12.09.2011, 13:50

Спасибо, но я все равно не очень понял что мне делать (((

dmitriymar · #16 (**permalink**) 12.09.2011, 13:56

сейчас

shilinpavel · #17 (**permalink**) 12.09.2011, 14:05

В смысле подождать?

dmitriymar · #18 (**permalink**) 12.09.2011, 14:09

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<style type="text/css">
#apDiv1 {
	position:absolute;
	left:38px;
	top:14px;
	width:315px;
	height:74px;
	z-index:1;
}

#apDiv2 {
	position:absolute;
	left:43px;
	top:100px;
	width:239px;
	height:42px;
	z-index:2;
}
</style>
<script>
function scritie(znacenie)
 {
	document.getElementById("inp").value=znacenie.innerHTML;
	document.getElementById("apDiv1").style.display="none";
        // аякс запрос 
 }
function perehod()
 {
       // аякс запрос получение результатов
       // вставка ответов в контейнер
       // document.getElementById("apDiv1").innerHTML=ответ с сервера
	document.getElementById("apDiv1").style.display=""; 
 }
</script>

</head>

<body>
<div id="apDiv1"><a href="#" onclick="scritie(this)">нажми </a></div>
<div id="apDiv2"><input id="inp" type="text" onkeyup="perehod()"/></div>

<script>
document.getElementById("apDiv1").style.display="none";
</script>
</body>

это простое демо показывающее как должны события присходить onblur не нужен вообще .

shilinpavel · #19 (**permalink**) 12.09.2011, 14:15

Но id="apDiv1" не пропадает когда кликаешь в пустоту.

Триви · #20 (**permalink**) 12.09.2011, 14:22

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

Но id="apDiv1" не пропадает когда кликаешь в пустоту.

<input id="inp" type="text" onkeyup="perehod()" onblur='document.getElementById("apDiv1").style.display="none"'/>

Форум

Справочник

Discord чат

Курсы javascript