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

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

У меня есть поле ввода [которое]; onkeyup, выполняет поиск Ajax, который возвращает результаты в divs и возвращается в использовании 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событие?)

7.08.2008 15:58:10
2 ОТВЕТА
РЕШЕНИЕ

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

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

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

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

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

Пара других вещей:

  • Использование JavaScript дает вам гораздо больше контроля, чем запись onkeyupатрибутов и т. Д. В ваш HTML. Если вы не хотите делать что-то действительно простое, я бы использовал JavaScript.
  • Если вы пишете свой собственный код для обработки событий клавиатуры, хорошая ссылка на код клавиши очень удобна.
7
21.08.2008 02:46:05

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

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

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

0
10.02.2016 16:10:51