|
Цитата:
|
|
но не лучший вариант вводи индикатор а лучший отслеживай на каком элементе был перед этим.
|
А как это сделать?
Вот мой код:
<!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>