Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Сделать несколько текстовых полей с ajax-suggest, расширить код из примера 
V
    Опции темы
Sardar
Дата 5.3.2008, 12:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Парни... ну вы млин даёте... неделю обсуждать и не сдвинутся с места... smile 

Код

function initSuggestField(field) {
    var searchReq = getXmlHttpRequestObject();
    
    var sugwindow = document.createElement('div');
    sugwindow.className = 'search_suggest';
    document.body.appendChild(sugwindow);
    
    field.onkeyup = function () {
        if(searchReq.readyState == 4 || searchReq.readyState == 0) {
            var str = escape(field.value);
            searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
            searchReq.onreadystatechange = handleSearchSuggest; 
            searchReq.send(null);
        }        
    }
    
    function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
            sugwindow.innerHTML = '';
            sugwindow.style.visibility = 'visible';
            var str = searchReq.responseText.split("\n");
            for(i=0; i < str.length; i++) {
                var suggest = document.createElement('a');
                suggest.appendChild(document.createTextNode(str[i]));
                suggest.className = 'suggest_link';
                suggest.href = 'javascript: void(0);';
                suggest.onclick = function() { field.value = this.innerHTML; };
                sugwindow.appendChild(suggest);
            }
        }
    }
}

hover эффекты лучше делать на ссылке, быстрей и проще:

Код

a.suggest_link {
                display: block; /* ссылка теперь блочный элемент, но своего :hover не теряет */
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            
            a.suggest_link:hover {
                background-color: #3366CC;
            }
            
            .search_suggest {
                position: absolute;
                visibility: hidden;
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }


Код

<input type="text" id="test" alt="Search Criteria" autocomplete="off" />
<script type="text/javascript">
    initSuggestField(document.getElementById('test'));
</script>


Перебираем любыми путями все необходимые input'ы, инициализируем фичу. Осторожно, писал за минуту на коленке без проверки, могут быть синтаксические ошибки.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ok_computer
Дата 5.3.2008, 13:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1
ошибка не удалось загрузить страницу. операция прервана


зы я не парень)
PM MAIL   Вверх
Itsys
Дата 5.3.2008, 14:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34
Нет, конечно, я же писал:
Код

//Click function
function setSearch(value, num) {
    document.getElementById('txtSearch' + num).value = value;
    document.getElementById('search_suggest' + num).innerHTML = '';
}


Она остается одна - последнюю функцию
Код

function setSearch1(value) {
    document.getElementById('txtSearch').value = value;
    document.getElementById('search_suggest').innerHTML = '';

    document.getElementById('txtSearch1').value = value;
    document.getElementById('search_suggest1').innerHTML = '';
} 

убирай
PM MAIL WWW Skype   Вверх
Sardar
Дата 5.3.2008, 15:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
Цитата(ok_computer @  5.3.2008,  12:02 Найти цитируемый пост)
ошибка не удалось загрузить страницу. операция прервана

Что в консоли написано? Заметь, я в исходник getXmlHttpRequestObject не добавил, полагая что ты сама об этом догадаешься... smile
Приведи полный листинг страницы.

Itsys создание массы setSearch*() и searchSuggest*(), только потому что обращаемся к объектам по id - это страшный по своей не эффективности (глупости) приём, особенно если количество полей требующих suggest'а может изменятся от страницы к странице. Не в обиду smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Itsys
Дата 5.3.2008, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1338
Регистрация: 21.1.2008
Где: г. Москва

Репутация: 12
Всего: 34
Цитата(Sardar @  5.3.2008,  15:59 Найти цитируемый пост)
создание массы setSearch*() и searchSuggest*(), только потому что обращаемся к объектам по id - это страшный по своей не эффективности (глупости) приём, особенно если количество полей требующих suggest'а может изменятся от страницы к странице. Не в обиду 

Не в обиду... я в самом начале предлагал....
Цитата(Itsys @  21.2.2008,  23:40 Найти цитируемый пост)
Либо написать отдельный класс и инициализировать его для каждого поля (но, я думаю, тебе будет проще первый вариант)


Добавлено через 7 минут и 35 секунд
Цитата(Sardar @  5.3.2008,  15:59 Найти цитируемый пост)
setSearch*(


И setSearch один.... smile 
PM MAIL WWW Skype   Вверх
ok_computer
Дата 6.3.2008, 09:28 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1


Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



<html lang="en-US">
    <head>
        <style type="text/css" media="screen">
            body {
                font: 11px arial;
            }
           
          
.suggest_link {
                display: block; /* ссылка теперь блочный элемент, но своего :hover не теряет */
                background-color: #FFFFFF;
                padding: 2px 6px 2px 6px;
            }
            
            a.suggest_link:hover {
                background-color: #3366CC;
            }
            
            .search_suggest {
                position: absolute;
                visibility: hidden;
                background-color: #FFFFFF; 
                text-align: left; 
                border: 1px solid #000000;            
            }


    
        </style>

<script language="JavaScript" type="text/javascript" src="ajax_search.js"></script>
    

</head>
    <body>
        <h3><a href="http://www.DynamicAJAX.com" style="color: #000000; text-decoration: none;">Simple AJAX Search Suggest</a></h3>
        <div style="width: 500px;">
      
            <form id="frmSearch" action="http://www.DynamicAJAX.com/search.php">

<input type="text" id="test" alt="Search Criteria" onkeyup="initSuggestField(document.getElementById('test')); "  autocomplete="off" />




           



<input type="submit" id="cmdSearch" name="cmdSearch" value="Search" alt="Run Search" /><br />
                <div id="search_suggest">
                </div>
            </form>
        </div>
    </body>
</html>


Код

//Gets the browser specific XmlHttpRequest Object
function getXmlHttpRequestObject() {
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    } else if(window.ActiveXObject) {
        return new ActiveXObject("Microsoft.XMLHTTP");
    } else {
        alert("Your Browser Sucks!\nIt's about time to upgrade don't you think?");
    }
}


function initSuggestField(field) {
    var searchReq = getXmlHttpRequestObject();
  
  
    var sugwindow = document.createElement('div');
    sugwindow.className = 'search_suggest';
    document.body.appendChild(sugwindow); 
    
    field.onkeyup = function () {
        if(searchReq.readyState == 4 || searchReq.readyState == 0) {
            var str = escape(field.value); 
            searchReq.open("GET", 'searchSuggest.php?search=' + str, true);
            searchReq.onreadystatechange = handleSearchSuggest; 
            searchReq.send(null);
       }       
    }
    
    function handleSearchSuggest() {
        if (searchReq.readyState == 4) {
            sugwindow.innerHTML = '';
            sugwindow.style.visibility = 'visible';
            var str = searchReq.responseText.split("\n");
            for(i=0; i < str.length; i++) {
                var suggest = document.createElement('a');
                suggest.appendChild(document.createTextNode(str[i]));
                suggest.className = 'suggest_link';
                suggest.href = 'javascript: void(0);';
                suggest.onclick = function() { field.value = this.innerHTML; };
                sugwindow.appendChild(suggest);
            }
        }
    }
}



Это сообщение отредактировал(а) ok_computer - 6.3.2008, 13:15
PM MAIL   Вверх
ok_computer
Дата 6.3.2008, 13:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1
всем большое спасибо)

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

Это сообщение отредактировал(а) ok_computer - 6.3.2008, 13:20
PM MAIL   Вверх
Sardar
Дата 6.3.2008, 13:39 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317
После 18 строки добавь sugwindow.style.left = field.offsetLeft + 'px'; Аналогично для.top + fielf.offsetHeight.
Если input'ы в контейнерах на релативной/абсолютной позиции лежат, то потребуется пробежать по .offsetParent'ам до html, что бы правильно позицию input'а расчитать. Вбей offsetParent в поиск если не понятно.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
ok_computer
Дата 7.3.2008, 08:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Шустрый
*


Профиль
Группа: Участник
Сообщений: 52
Регистрация: 16.1.2008

Репутация: нет
Всего: 1
спасибо)
PM MAIL   Вверх
Yens
Дата 10.7.2008, 13:54 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 2.7.2008

Репутация: нет
Всего: нет
А как быть в случае, если в коде 
Код

suggest.onclick = function() { field.value = this.innerHTML; };

Строка 
Код

 this.innerHTML == ''

Т.е. Скрипт возвращает в какой-то момент пустое значение. Как сделать так, чтобы в таком случае вызывалась что-то типа 
Код

sugwindow.style.visibility = 'hidden';

?
PM MAIL   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.0892 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.