Как перемещаться по клавиатуре вниз или вверх между выпадающими вариантами?

У меня есть специально созданный динамический раскрывающийся список на основе ajax [div].

У меня есть поле ввода, которое; onkeyup, запускает поиск Ajax, который возвращает результаты в divс и возвращается с использованием innerHTML. Все эти div имеют подсветку 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. Я не могу использовать клавиатуру вниз или вверх между «параметрами».

Я знаю, что javascript обрабатывает события клавиатуры, но; Я не смог найти хорошего гида. (Конечно, последующий вопрос в конечном итоге будет таким: могу ли я использовать <ENTER> для запуска этого события onclick?)


javascript events keyboard dom
person mauriciopastrana    schedule 07.08.2008    source источник

Ответы (2)


arrow_upward
7
arrow_downward

Что вам нужно сделать, так это прикрепить прослушиватели событий к div с id="results". Вы можете сделать это, добавив атрибуты onkeyup, onkeydown и т. д. к div при его создании или прикрепив их с помощью JavaScript.

Я рекомендую вам использовать библиотеку AJAX, например YUI, jQuery, Prototype и т. д. по двум причинам. :

  1. Похоже, вы пытаетесь создать элемент управления Auto Complete, что-то вроде должны предоставить большинство библиотек AJAX. Если вы можете использовать существующий компонент, вы сэкономите себе много времени.
  2. Даже если вы не хотите использовать элемент управления, предоставляемый библиотекой, все библиотеки предоставляют библиотеки событий, которые помогают скрыть различия между API-интерфейсами событий, предоставляемыми разными браузерами.

Забудьте о addEvent, используйте Утилиту обработки событий Yahoo! дает хорошее представление о событии библиотека должна предоставить вам. Я почти уверен, что библиотеки событий, предоставляемые jQuery, Prototype и т. д. др. предоставлять аналогичные функции.

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

Еще пара вещей:

  • Использование JavaScript дает вам гораздо больше контроля, чем запись атрибутов onkeyup и т. д. в ваш HTML. Если вы не хотите делать что-то действительно простое, я бы использовал JavaScript.
  • Если вы пишете собственный код для обработки событий клавиатуры, хороший справочник по ключевому коду действительно удобен.
person Walter Rumsby    schedule 17.08.2008

arrow_upward
0
arrow_downward

Внезапно я подумал, что вам нужно поддерживать некоторую форму структуры данных в JavaScript, которая отражает элементы в текущем раскрывающемся списке. Вам также понадобится ссылка на текущий активный/выбранный элемент.

Каждый раз, когда запускается keyup или keydown, обновляйте ссылку на активный/выбранный элемент в структуре данных. Чтобы предоставить информацию о выделении в пользовательском интерфейсе, добавьте или удалите имя класса, стилизованное с помощью CSS, в зависимости от того, активен/выбран элемент или нет.

Кроме того, это не так уж важно, но innerHTML на самом деле не является стандартным (посмотрите на createTextNode(), createElement() и appendChild() для стандартных способов создания данных). Вы также можете узнать о присоединении обработчиков событий в JavaScript, а не в атрибуте HTML.

person Tom    schedule 07.08.2008