My<cod/>.net
Как клавиатура вниз или вверх между выпадающим "options"?
У меня есть специально построенный динамический выпадающий список на основе ajax [div].
У меня есть поле [input], которое; onkeyup, запускает поиск Ajax, который возвращает результаты в div s и возвращается в использование innerHTML . Эти div s все имеют основные моменты onmouseover так, типичный успешный поиск дает следующую структуру (простите полу-код):
[input]
[div id=results] //this gets overwritten contantly by my AJAX function
[div id=result1 onmouseover=highlight onclick=input.value=result1]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[div id=result2 onmouseover=highlight onclick=input.value=result2]
[/div]
Это работает.
Однако мне не хватает важных функций за регулярными элементами HTML. Я не могу клавиатуру вниз или вверх между "options".
Я знаю, что javascript обрабатывает события клавиатуры, но; я не смог найти хорошего гида. (Конечно, последующий вопрос будет заключаться в следующем: могу ли я использовать <ENTER> для запуска этого события onclick ?)
Что вам нужно сделать, так это прикрепить прослушиватели событий к div с помощью id="results" . Вы можете сделать это , добавив onkeyup , onkeydown и т.д. атрибуты к div при его создании или вы можете прикрепить их с помощью JavaScript.
Я бы рекомендовал вам использовать библиотеку AJAX, такую как YUI, jQuery, Prototype и т. д. по двум причинам:
- Похоже, что вы пытаетесь создать автоматический полный контроль,который должен обеспечить большинство библиотек AJAX. Если вы можете использовать существующий компонент, вы сэкономите себе много времени.
- Даже если вы не хотите использовать элемент управления, предоставляемый библиотекой, все библиотеки предоставляют библиотеки событий, которые помогают скрыть различия между событиями APIs, предоставляемыми различными браузерами.
Забудьте addEvent, используйте Yahoo!утилита событий s предоставляет хорошее резюме того, что библиотека событий должна предоставить вам. Я почти уверен, что библиотеки событий, предоставляемые jQuery, Prototype, et. Аль. предоставляют аналогичные возможности.
Если эта статья проходит через вашу голову, сначала взгляните на эту документацию , а затем перечитайте оригинальную статью (я обнаружил, что статья имеет гораздо больше смысла после того, как я использовал библиотеку событий).
И еще пара вещей:
- Использование JavaScript дает вам гораздо больше контроля, чем написание
onkeyupи т. д. атрибуты в ваш HTML. Если вы не хотите сделать что-то действительно простое , я бы использовал JavaScript. - Если вы пишете свой собственный код для обработки событий клавиатуры, хорошая ссылка на код ключа действительно удобна.
С моей точки зрения, я бы подумал, что вам нужно поддерживать некоторую форму структуры данных в JavaScript, которая отражает элементы в текущем выпадающем списке. Вам также понадобится ссылка на текущий активный/выбранный элемент.
При каждом запуске keyup или keydown обновите ссылку на активный / выбранный элемент в структуре данных. Чтобы предоставить информацию о выделении на UI, добавьте или удалите имя класса, стилизованное через CSS, в зависимости от того, активен ли элемент/выбран или нет.
Кроме того, это не большая проблема , но innerHTML на самом деле не является стандартным (посмотрите на createTextNode() , createElement() и appendChild() для стандартных способов создания данных). Возможно, вы также захотите посмотреть, как прикрепить обработчики событий в JavaScript, а не в атрибуте HTML.