HTML+CSS+JavaScript

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

Вот например, как на рисунке по ссылке http://www.allpoisk.ru/i/form.bmp.

вроде бы здесь без php не обойтись... да и БД нужна...
а может и скриптом получится =)

С php я вобщем-то в товарищах, знаю как сделать обычный список с использованием БД.
Но не могу понять как сделать, что бы можно было вписать в него своё значение. Что касается ЯваСкрипта - пока ещё не очень знаю - учусь.
Кто сталкивался с такой задачей (список с возможностью вписать своё значение), помогите, пожалуйста.

PHP здесь совершенно "непришей кобыле хвост".

Конкретно такой, как, например, в WORD'e раскрывающийся список делается из:
а) одного тега <input>
б) пяти тегов <div>
в) нужного количества тегов <span> (кои изображают опшены)
г) одного рисунка ("стрелка вниз")

Все это нужным образом позиционируется, выставляются нужные стили (геометрии, видимости...), навешиваются onmoseover, onmoseout, onmousedown (а на <input> ещё и onmouseup), кои программируются на JScript'e должным образом.
Сходство - визуальное и функциональное - полное.

Вот так...
Другой способ - флешка.

CNT - спасибо за подсказку.
Вчера наконец-то решил реализовать задуманное. На странице - http://www.allpoisk.ru/test.php - результат моих мучений. Вобщем, полного сходства не получилось.
В FF не работает,в Опере почти работает, но выглядит, мягко говоря, неважно, в IE выглядит так как и было задумано, но работает так же как и в Опере. Делаю для себя - работаю в IE - ориентируюсь на него. Вобщем в IE основной функционал работает, если такой список один на странице.
Но у меня будет на одной странице несколько таких раскрывающихся списков с возможность вписывать свои значения - один под другим. И здесь возникают проблемы.
Есть такая функция, которая вставляет текст в <input> из "опшена" при клике мышко по нему:

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='postText' 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>

Функция для закрытия/открытия списка:

function ShowAddForm(id){      var sel = document.getElementById(id);      id.style.display = (id.style.display == 'none') ? '' : 'none';    }