VPF::выпадающее меню в поле input - Форум программистов

chiffa

Дата 4.1.2009, 22:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Добрый день. У меня такой вопрос как сделать выпадающее меню, тоесть автопоиск (на яндексе такое есть). Как программно написать я знаю, ПХП+AJAX это в принципе не проблема. Интерисует как сделать окошко которое открывается ниже input? это делает на CSS? Если не сложно можно примерчик? smile

ksnk

Дата 4.1.2009, 23:00 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

На css приходится слишком извращать разметку, да и все равно без JavaScript не обойтись... Проще сразу вот как-нибудь так:

Код


<script>
function menu(el,what){
    el.getElementsByTagName('div')[0].style.display=what||'block';
}
</script>
<style>
.menu{
    background:white;
    padding:10px 20px; 
    border:1px solid gray;
    position:absolute;
    top:1.2em; left:0px;
}
</style>

<div style="position:relative;float:left;" onmouseover="menu(this);" onmouseout="menu(this,'none');">
<input type="text" >
  <div  class="menu" style="display:none;">
    Йа Минюшко<br>
    <a href="http://www.google.com">Гугель</a><br>
    Йа Минюшко
  </div>
</div>

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

chiffa

Дата 4.1.2009, 23:14 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

супер! Спасибо! smile

chiffa

Дата 5.1.2009, 12:45 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

а как сделать что бы стрелками вниз/вверх на клавиатуре можно было двигать? smile

taral

Дата 9.1.2009, 12:29 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата

а как сделать что бы стрелками вниз/вверх на клавиатуре можно было двигать?

Через JS.
А вообще есть библиотека prototype и script.aculo.us.
В script.aculo.us есть готовая реализация выпадающего меню (оно настраивается идеально)
В ручную вы будете долго это делать. Просто есть еще много моментов. Например не подгружать еще данные если результаты уже есть в списке. Учитывать при запросах на сервер скорость набора символов пользователя. Выделение в "выпавших" словах символов что уже набраны.
Готовое решение брать не считаю лучшим вариантом. Потому и использую script.aculo.us.

chiffa

Дата 9.1.2009, 21:15 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

Были идеи использовать тот же prototype или Яху, проект эксклюзивный и это к сожалению недопустимо...

По теме вариант у меня один - отлавливать нажатие кнопок вниз/вверх и соответственно выделять объекты. хотя как это уж слишком коряво. Может у кого то есть идеи получше?

taral

Дата 9.1.2009, 21:57 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата

По теме вариант у меня один - отлавливать нажатие кнопок вниз/вверх и соответственно выделять объекты. хотя как это уж слишком коряво. Может у кого то есть идеи получше?

Я представляю реализацию так.
Создается объект который отвечает за выпадающий список. при нажатии на стрелку вверх вниз он изменяет стиль li определенного пункта меню (для создания впечатления его выбора). В объект записывается какой по счету это пункт (для того что бы при нажатии вверх вниз выбрать следующий предыдущий пункт), innerHtml этого пункта (если человек нажмет enter то этот текст мы вставим в поле ввода) Ну собсно и все.

Это сообщение отредактировал(а) taral - 9.1.2009, 21:58

chiffa

Дата 9.1.2009, 22:27 (ссылка)

(нет голосов)

Загрузка ...

Опытный

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

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

ну да. я где это имел ввиду smile

еще такой вапросик: может подскажешь как отлавливать нажатия клавишь. когда то находил в сети пример но уже непомню. насколько я знаю там по кодам нужно...

taral

Дата 10.1.2009, 21:21 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

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

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

Цитата

ну да. я где это имел ввиду smile еще такой вапросик: может подскажешь как отлавливать нажатия клавишь. когда то находил в сети пример но уже непомню. насколько я знаю там по кодам нужно...

Да у объекта события есть свойство какая клавиша нажата. Честно говоря я никогда не работал с определение клавиш клавиатуры (только мышки, а у нее свое свойство..)
Погугли я уверен что есть хорошие статьи на эту тему. Я думаю что и на форуме тоже есть обсуждения.
Тут тоже должно быть - http://javascript.ru

Это сообщение отредактировал(а) taral - 10.1.2009, 21:21

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »