HTML+CSS+JavaScript

Помогите, пожалуйста. Нужно сделать раскрывающийся список с возможностью вписать своё значение или выбрать из уже существующих значений (как в Word'е). Предпологается, что в одной форме будет несколько таких списков. На странице - http://www.allpoisk.ru/test.php - результат моих мучений (JavaScript'ом занялся совсем недавно).

Вроде всё получилось, но только если список в форме один. Если списков больше функция добавления значения из списка

function addText(text){         window.document.frm.postText.value = text;     }

уже не работает.

Пробовал так

function addText(text, id){         window.document.frm.id.value = text;     }

тоже не работает. id - номер <input>.

Вот код одного списка:

<FORM name="frm" style='margin:0px'>      <DIV style="float:left;width:218px">      <INPUT name='addType' type="text" value="text" maxlength="33" style="font-family:Tahoma;width:214px;font-size:11px;height:15px;padding:2px 2px 0px 2px;border: 1px solid #85ABBC">     </DIV>        <DIV style="float:left;margin:1px 0px 0px -18px" onmouseover="document.mainimage.src='http://prostor/i/overo.bmp'" onmouseout="document.mainimage.src='http://prostor/i/out.bmp'">      <IMG onclick="javascript:ShowAddForm(main)" border='0px' name="mainimage" src="http://prostor/i/out.bmp"/>     </DIV>     <DIV style="clear:left;position:relative;margin-top:-3px">      <DIV id="main" style='display:none;background: #FFFFFF; font-family: Tahoma; padding: 0px; font-size: 11px; border: 1px solid #404082; width: 218px; text-align:left; position:absolute; left:0px; top:-1px; z-index:1'>       <DIV onclick="addText('Бытовая техника'); javascript:ShowAddForm(main)" style='padding:0px 2px 0px 2px'>Бытовая техника</DIV>       <DIV onclick="addText('Телефония и связь'); javascript:ShowAddForm(main)" style='padding:0px 2px 0px 2px'>Телефония и связь</DIV>       <DIV onclick="addText('Электроника и фото'); javascript:ShowAddForm(main)" style='padding:0px 2px 0px 2px'>Электроника и фото</DIV>       <DIV onclick="addText('Компьютерная техника'); javascript:ShowAddForm(main)" style='padding:0px 2px 0px 2px'>Компьютерная техника</DIV>       <DIV onclick="addText('Товары для спорта'); javascript:ShowAddForm(main)" style='padding:0px 2px 0px 2px'>Товары для спорта</DIV>      </DIV>     </DIV> </FORM>

Помогите решить эту проблему - модифицировать функцию addText так, чтобы она работала и при наличии двух и более списков в форме.

1. Вы это вопрос уже задавали.

2. Раскрывающийся список в Word'e НЕ ДАЁТ возможности что-либо дописать
в сам список - это вы на него наговариваете:-)
В Word'e можно вписать своё значение в текстовое поле и после нажатия ENTER
программа постарается исполнить то указание, что прописал юзер (например,
отобразить документ в указанном масштабе). Но ни в какое место списка это
значение не вносится.

3. У вас ВОВСЕ НИЧЕГО не работает даже в единичном экземляре, а вас почему-то
беспокоит проблема - как бы сделать, чтобы работало несколько штук.


Опишите КОНКРЕТНО и ЧЁТКО, что вы хотите получить.
Например так:

а) юзер видит перед собой поле ввода и рядом с ним кнопку (вместе напоминает
нераскрытый тег <SELECT>)

б) в текстовом поле прописано слово КРАСНЫЙ

в) если юзер нажмет на кнопку, то ниже кнопки и текстового поля появится
список (аналогичный списку тега <SELECT>), где будут прописаны в виде
"опшенов" слова СИНИЙ, ЖЁЛТЫЙ, ЧЁРНЫЙ, ЗЕЛЁНЫЙ. Юзер может кликнуть
по любому из этих "опшенов" (например, по ЧЁРНЫЙ), после чего список
закроется, а в текстовом поле появится выбранное слово ЧЁРНЫЙ (и
что-то - ЧТО ИМЕННО? - произойдет в каком-то месте страницы - ГДЕ ИМЕННО?).

г) также юзер может не кликать по кнопке, а кликнуть по текстовому полю. Тогда
слово, написанное в поле, должно (ИЛИ НЕ ДОЛЖНО?) выделиться, что будет
приглашением юзеру изменить слово в поле ввода. Положим, юзер с помощью
клавиатуры (а может И С ПОМОЩЬЮ КОПИ-ПАСТЕ?) введет туда слово
ФИОЛЕТОВЫЙ и по окончании ввода нажмёт клавишу ENTER. Вот тут-то и должно
что-то - ЧТО ИМЕННО? - произойти в каком-то месте страницы - ГДЕ ИМЕННО?)

д) также не забудьте указать - что должно случиться, если юзер введет слово, кое
УЖЕ ЕСТЬ в списке? И что должно случиться, если он введет какой-нить БРЕД
вместо предполагаемого слова (например, напишет - "ВЫ ВСЕ ДУРАКИ"?)

В общем, где-то так.

И вот только тогда можно будет вам помочь.

А пока... вы уже второй раз пишете на этом форуме, и вам никто не помогает.
Ибо непонятно - чего же вы хотите поиметь - и от нас, и от Javascript'a?

Спасибо, CNT. Щас попробую сбацать подробное описание :).

Общее:
Для каталога магазинов нужно создать форму описания характеристик этих самых магазинов. Форма будет использоваться как для добавления информации о новом магазине в БД, так и для редактирования информации об уже добавленнных магазинах. После заполнения формы и нажатия на кнопку "ПРИМЕНИТЬ" данные сохраняются в БД с помощью php. Закачал скрин формы - http://www.allpoisk.ru/test.php. В данной форме будут использоваться различные элементы: чекбоксы, тектовые поля, текстреа - с ними проблем нет. А так же те самые "не совсем обычные списки", из-за которых и заведена эта тема - по ним нужна помощь. О них дальше речь и пойдёт.

Так вот, должно получиться следующее:
1) Администратор сайта видит перед собой не стандартные элементы формы - напоминающий нераскрытый тег <SELECT> (поле ввода и рядом с ним кнопку).

2) Если необходимо добавить информацию о новом магазине, поле ввода с кнопкой пустое, иначе там будет автоматически выставлено какое-то значение. Если администратор нажмет на кнопку, то ниже кнопки и текстового поля появится список (аналогичный списку тега <SELECT>, который будет формироваться автоматом средствами php на основе данных БД при открытии страницы), где будут прописаны в виде "опшенов" значения, которые были введены для ранее описанных магазинов (напрмер, БЫТОВАЯ ТЕХНИКА, ТЕЛЕФОНИЯ И СВЯЗЬ, ЭЛЕКТРОНИКА И ФОТО и т.д.) и уже присутствуют в БД. Если подходящего значения в списке нет администратор вписывает новое значение, иначе он может кликнуть по любому из этих "опшенов" (например, по ТЕЛЕФОНИЯ И СВЯЗЬ), после чего список закроется, а в текстовом поле появится выбранное слово ТЕЛЕФОНИЯ И СВЯЗЬ. После клика по опшену больше ничего происходить не должно (кроме появления текста в поле).

3) Также администратор может не кликать по кнопке, а кликнуть по текстовому полю. Тогда
слово, написанное в поле, ДОЛЖНО выделиться, что будет приглашением администратору изменить слово в поле ввода. Администратор с помощью клавиатуры или С ПОМОЩЬЮ КОПИ-ПАСТЕ введет туда слово БЫТОВАЯ ТЕХНИКА и по окончании ввода, если будет нажата клавиша ENTER произойдёт тоже самое, что и при нажатии кнопки "ПРИМЕНИТЬ" (т.е инфа сохранится в Базе средствами php).

4) Если администратор введёт какое-нибудь нехорошее слово или если такое слово уже есть в списке, то такие ситуации будут обработаны средствами php после нажатия кнопки "ПРИМЕНИТЬ". Это всё уже я сделал сам.

Вобщем, это всё. Если что-то не совсем понятно, уточню. Спрашивайте, пожалуйста.

Вопросы:
1. Браузеры, где это будет работать - имя, версия?

2. Раскрывающийся список "псевдоселекта" должен перекрывать собою находящееся
под ним содержание страницы или же может это содержание "грубо сдвигать вниз"?

1) Браузеры - предполагается, что это работать будет в следующих браузерах: Internet Explorer (версии 6.*, 7.*), Opera (версии 8.*, 9.*), Mozilla Firefox (версии 1.*, 2.*). Основной браузер Internet Explorer (версии 6.*, 7.*).

2) Раскрывающийся список "псевдоселекта" должен перекрывать собою находящееся
под ним содержание страницы. Это обязательно.

Только для MSIE (тестировал в 6-й версии).

Смотрим, ищем недостатки, комментируем.

Да-а-а... Я бы до такого не додумался бы. Класс! Мне ещё учиться и учиться.

Ну это так... Далее комментарии по существу...

Пощёлкал, посмотрел - есть некоторые моменты, которые нужно исправить.
Для наглядной демонстрации некоторых недостатков я немного изменил ХТМЛ код - http://allpoisk.ru/q15012008.html.

Недостатки, комментарии:
1.1) В IE 6: Когда содержимое страницы не помещается на экране монитора (когда есть полосы прокрутки), при щелчке на кнопке рядом с текстовым полем, страница резко прокручивается вверх или вверх-вправо, так что скрывается само текстовое поле. Хорошо бы было избавиться от такого эффекта.
1.2) В Opere 8: Такого эффекта не наблюдается.
1.2) В FireFox 2: При щелчке на кнопке список не выпадает - в консоль записывется ошибка: window.frames is not a function. Строка: 45

2.1) В IE 6: При нажатии на кнопку выпадающий "псевдоселект" перекрывает все стандартные элементы формы, но не перекрывает "себе подобных". Это можно наблюдать здесь - http://allpoisk.ru/q15012008.html в четвёртом столбце. Нужно что бы перекрывалось.
2.2) В Opere 8: Такого эффекта не наблюдается.
2.3) В FireFox 2: Неизвестно.

3.1) В IE 6: Для совместимости с уже существующим PHP-скриптом, в который будут внедряться "псевдоселекты" нужно исправить немного функцию fCreateSelectText (W, N, A, C). Нужно чтобы параметр С был не индексом массива, а одним из текстовых значений массива. Вместо индекса '-1' какое-нибудь общее слово (например: Выбрать).
3.2) В Opere 8: Тоже.
3.3) В FireFox 2: Тоже.

4.1) В IE 6: Было бы здорово если кнопка рядом с текстовым полем выглядела бы так же как и в стандартном селекте.
4.2) В Opere 8: Аналогично.
4.3) В FireFox 2: Аналогично.

5.1) В IE 6: Проблем с кодировкой нет.
5.2) В Opere 8: Проблемы с кодировкой.
5.3) В FireFox 2: По всей видимости проблем скодировкой нет.

6.1) В IE 6: Проблем с лишними полосами прокрутки в самом ввыпадающем списке нет.
6.2) В Opere 8: Выпадающие списки имеют полосы прокрутки - лучше зделать что бы их не было.
6.3) В FireFox 2: Неизвестно.

Это по-моему всё. Спасибо, что помогаете...

Мда...
А внимательности у вас НЕТ. Причём - АБСОЛЮТНО нет.

Перечитайте ПЕРВОЕ предложение моего сообщения (16.01.2008 в 23:40) .

Повторяю его здесь ещё раз:
"Только для MSIE (тестировал в 6-й версии)"

И ещё раз так:
"Только для MSIE (тестировал в 6-й версии)"

И напоследок так:

"ТОЛЬКО для MSIE (тестировал в 6-й версии)"

Теперь спрашивается - зачем вы тестировали его в Опере и Лисе? :-)

Посмотреть на ваши изменения мне не удалось - URL вы указали странноватый :-)

По недостаткам (ТОЛЬКО для Эксплорера):

>1.1) Когда содержимое страницы не помещается на экране монитора (когда есть полосы
прокрутки), при щелчке на кнопке рядом с текстовым полем, страница резко прокручивается
вверх или вверх-вправо, так что скрывается само текстовое поле. Хорошо бы было
избавиться от такого эффекта.
Тут такое дело... настоящий <SELECT> имеет возможность "выходить" даже за границу
браузера - можете это посмотреть на той же странице, уменьшив окно по высоте до
начала появления вертикального скролла у страницы. Лепить выходящее за пределы окна
браузера - задача нетривиальная, решение, знаю, существует (типа хромелесс-окна), но я такого
ещё никогда не делал... боюсь, это может затянуться по времени... а "суперкрасивый"
псевдоселект, думаю, вам на пенсии и не нужен будет вовсе:-)

Поэтому предлагаю как вариант:
а) уменьшить высоту раскрывающегося списка - сейчас она, как и в стандартном <SELECT>
равна максимум 11-ти опшенам. Можно сделать 4..5..6 штук (выбирайте точное число) и тогда
размер списка по высоте уменьшится;
б) кроме того, можно при недостатке места снизу текстового поля и кнопки открывать список
сверху (и это легко реализуемо).

>При нажатии на кнопку выпадающий "псевдоселект" перекрывает все стандартные элементы
формы, но не перекрывает "себе подобных".
Исправлю. Добавлю динамический Z-INDEX для списка при раскрытии.

>Для совместимости с уже существующим PHP-скриптом, в который будут внедряться
"псевдоселекты" нужно исправить немного функцию fCreateSelectText (W, N, A, C). Нужно чтобы
параметр С был не индексом массива, а одним из текстовых значений массива. Вместо
индекса '-1' какое-нибудь общее слово (например: Выбрать).
Переформулирую вашу претензию: "Когда вводимый индекс равен -1, то в текстовое поле
надо поместить слово "Выбрать", а не оставлять его пустым, как сейчас
реализовано СОГЛАСНО РАНЕЕ ВАМИ ЗАДАННОГО УСЛОВИЯ. Если индекс будет
неотрицательный, то в текстовом поле И ТАК появляется одно из текстовых значений массива.
Так?:-)

>Было бы здорово если кнопка рядом с текстовым полем выглядела бы так же как
и в стандартном селекте.
Ну это могли бы и сами :-)
Ну да ладно, сделаю. Хотя... я думал, наоборот, надо хоть как-то изменить внешний вид,
ибо если на странице вместе с "псевдоселектом" будет и настоящий <SELECT>, то юзер их не
отличит, что не есть "комильфо".
Была у меня мысль между текстовым полем и кнопкой-стрелкой вписать ещё кнопку
с "плюсом", коя будет задисаблена (пока юзер пользуется только функциями "селекта",
а как только он начнёт вписывать (или "пастить") новый тест "опшена", то кнопка станет
доступной и при нажатии на неё новый "опшен" добавится к списку... но по
вашему ТЗ (техническому зданию) такового было не надо. поэтому моя мысль "ушла" :-)

------
Теперь те недостатки, кои вы не заметили (или постеснялись отметить):
1. кнопка настоящего <SELECT> работает на событие "нажатие", а у меня - на событие "клик"

2. закрытия списка при нажатии на кнопку селекта не происходит (надо или выбрать "опшен",
или ткнуть в любое место страницы (кроме списка)
//оба эти недостатка исправимы - просто я не хотел динамически вешать функции, но, как
оказалось, события focus, onblur и mousedown, кои я использовал, серьёзно конфликтуют
(вплоть до появления системного окна "Отправить Биллу Гейтсу сообщение об ошибке").
Поэтому заменил mousedown на click (и пожертвовал закрытием списка кликом по кнопке)...
В общем, или разберусь с конфликтами, или же использую навеску функций//

3. немного не совпадают размеры "псевдоселекта" с настоящим (по высоте).
//Попытка принудительно уменьшить высоту текстового поля привела к интересному
эффекту "дёргания" значения текстового поля, с коим я ранее не сталкивался... потому
изучу и, если можно будет, исправлю.//

PS. Что до Оперы и Лиса... то подобные задачи всегда решаю сначала для одного браузера,
отлаживаю в нём (выявляя недостатки и доп.возможности), а уже потом дорабатываю и для других.

По поводу Оперы и Лисы - это я так просто сам для себя просматривал и решил, что и эта инфа не помешает. Я видел, что Вы написали о тестировании только в IE 6. :-)

Далее. Я исправил ссылки на изменения ХТМЛ кода - http://allpoisk.ru/q15012008.html.
1.1) Кажется по первому комменту Вы меня не правильно поняли (или я не непонятно описал проблему :-)). Вобщем перейдите по ссылке http://allpoisk.ru/q15012008.html, щёлкните по кнопке и сами поймёте. Получается так, что и места под выпадающим списком предостаточно, но страница всё равно прокручивается вниз. А по идее должна оставаться недвижимой.
>Поэтому предлагаю как вариант:
а) уменьшить высоту раскрывающегося списка - сейчас она, как и в стандартном <SELECT>
равна максимум 11-ти опшенам. Можно сделать 4..5..6 штук (выбирайте точное число) и тогда
размер списка по высоте уменьшится;
Здесь, наверное, пускай так и останется, 11 опшенов привычнее.

б) кроме того, можно при недостатке места снизу текстового поля и кнопки открывать список сверху (и это легко реализуемо).
С этим согласен, будет совсем не лишне.

2.1) Нет, немного не так :-). Вернее я не точно описал проблему в предыдущем посте (писал ночью - ошибся :)). Исправляюсь. Вместо индекса в параметре 'С' должно содержаться именно текстовое значение. И НЕОБЯЗАТЕЛЬНО, чтобы оно было только из массива параметра 'А'. Может быть такая ситуация при обработке ошибок добавления инфы в БД. Например, админ ввёл в один или в несколько "псевдоселектов" новые значения (которых нет ещё в массиве 'А'). Кликнул на кнопке "ПРИМЕНИТЬ". Если происходит ошибка при добавлении в БД (ошибка может быть любая не связанная с "псевдоселектом"), открывается таже страница с сообщением об ошибке и с формой с уже введёнными только что данными (эти данные сохраняются в ссесии, если происходит ошибка). В этот момент, относительно "псевдоселекта" новое значение в базу данных не было занесено и в массиве 'А' нет ещё этого значения, но оно отбражаеся (должно отображаться) в текстовом поле. Вот так.

3.1) Здесь я просто рисунок кнопки немного изменю, например птичку зделаю жирнее. Будет в том же стиле и отличить от обычного селекта тоже можно будет.

Недостатки, о которых я не упомянул, но Вы описали, действительно, тоже будет здорово, если Вы их исправите. Тестировал и писал ночью - что-то не заметил, а что-то и забыл написать :-).

Вобщем так. Если что-то не понятно задавайте уточняющие вопросы :-).