Я вот думал, каким образом можно сделать выпадающий список чего то, как в Яндексе. Вводим что то в строку поиска, выпадает список с вариантами.
А после этого стрелочками можно двигаться в верх или вниз.
Пока, я смог сделать подобное дело, с помощью AJAX. Но при этом стрелками двигаться по списку нельзя, только мышью.
Я не прошу код, но надеюсь, что подкинете мне идейку.
Спасибо огромное!
Спустя 46 минут, 32 секунды (27.02.2010 - 14:49) sergeiss написал(а):
А почему стрелками низзя? Сделай список, его когда выберешь (программно или мышью), то дальше можно и стрелками перемещаться. Только не "выпадающий", а список с количеством строк больше 1.
Спустя 1 час, 18 минут, 54 секунды (27.02.2010 - 16:07) ApuktaChehov написал(а):
Я сделал впадающий список дивом, в который грузятся ссылки через <br> AJAX - ом.
Получается, что выглядит это так:
<input type = "text">
<div>
<a href="">1</a><br>
<a href="">2</a><br>
<a href="">3</a><br>
...
</div>
В поле input вводится текст, после чего происходит отправка введенных данных скрипту, который возвращает сслыки через <br>.
При таком раскладе кнопки не работают. Т.е. список прокручивается, но только как слой. Элементы списка не выделяются. К тому же что бы этот слой прокрутить, его нужно выделить мышкой.
sergeiss чесно говоря, я не понял, что Вы имели в виду.
А что это за список "список с количеством строк больше 1"?
Получается, что выглядит это так:
<input type = "text">
<div>
<a href="">1</a><br>
<a href="">2</a><br>
<a href="">3</a><br>
...
</div>
В поле input вводится текст, после чего происходит отправка введенных данных скрипту, который возвращает сслыки через <br>.
При таком раскладе кнопки не работают. Т.е. список прокручивается, но только как слой. Элементы списка не выделяются. К тому же что бы этот слой прокрутить, его нужно выделить мышкой.
sergeiss чесно говоря, я не понял, что Вы имели в виду.
А что это за список "список с количеством строк больше 1"?
Спустя 8 минут, 14 секунд (27.02.2010 - 16:16) sergeiss написал(а):
ApuktaChehov - у тебя я вижу набор ссылок, но не вижу списка!
Вот это - список, в котором видны 10 строк сразу:
Формируешь список динамически, на основании данных, полученных через AJAX. Тут же выставляешь его длину (size). При выборе строки срабатывает сделанный тобой же обработчик, и ты делаешь какое-то действие.
А выводить список надо чуть ниже поля ввода. Тогда у юзера создается иллюзия, что этот список приделан к полю ввода. Но мы-то знаем, что это не так! А самое главное, чтобы юзер получил в итоге то, что ему нужно.
Также нужен обработчик нажатия клавиш. Нажал "стрелка вниз" в текстовом поле ввода - сработала функция, которая сменила выбранную строку в списке (если там есть куда смещаться).
Вот это - список, в котором видны 10 строк сразу:
<select size="10">
<option ....>....</option>
....
</select>
Формируешь список динамически, на основании данных, полученных через AJAX. Тут же выставляешь его длину (size). При выборе строки срабатывает сделанный тобой же обработчик, и ты делаешь какое-то действие.
А выводить список надо чуть ниже поля ввода. Тогда у юзера создается иллюзия, что этот список приделан к полю ввода. Но мы-то знаем, что это не так! А самое главное, чтобы юзер получил в итоге то, что ему нужно.
Также нужен обработчик нажатия клавиш. Нажал "стрелка вниз" в текстовом поле ввода - сработала функция, которая сменила выбранную строку в списке (если там есть куда смещаться).
Спустя 2 минуты, 23 секунды (27.02.2010 - 16:18) ApuktaChehov написал(а):
Об этом я думал тоже. Но я не знаю как переместиться из поля <input> в <select>. Ведь данные вводяться не в <select> же?
Спустя 54 секунды (27.02.2010 - 16:19) sergeiss написал(а):
| Цитата (ApuktaChehov @ 27.02.2010 - 17:18) |
| Но я не знаю как переместиться из поля <input> в <select> |
Пока ты писал этот текст, я уже сделал приписку в предыдущем ответе
Спустя 1 минута, 35 секунд (27.02.2010 - 16:21) ApuktaChehov написал(а):
Во. Вот оно где зарыто! Спасибо!
Я где то рядом с этим блуждал.
Честь и хвала!
Я где то рядом с этим блуждал.
Честь и хвала!
Спустя 1 час, 8 минут, 16 секунд (27.02.2010 - 17:29) Michael написал(а):
Видел как в гугле это сделано? - под инпутом выводится табличка - в ней инфы побольше чем в select можно запихнуть.
Все нажатия кнопок навешиваются на инпут и уже как реакция - подсветка и перемещение по строкам этой таблицы.
Тут надо еще учесть чтобы по стрелке вниз фокус не соскочил с инпута при открытом списке.
Вроде все, особых проблем закодить не вижу.
Все нажатия кнопок навешиваются на инпут и уже как реакция - подсветка и перемещение по строкам этой таблицы.
Тут надо еще учесть чтобы по стрелке вниз фокус не соскочил с инпута при открытом списке.
Вроде все, особых проблем закодить не вижу.
| Цитата |
| <div> <a href="">1</a><br> <a href="">2</a><br> <a href="">3</a><br> ... </div> |
Так на будущее - если этим ссылкам присвоить display:block; то не нужны будут <br>.
_____________