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

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

У меня есть поле ввода [которое]; onkeyup, запускает поиск Ajax, который возвращает результаты в div и извлекается обратно с использованием innerHTML. Все эти div имеют основные моменты при onmouseover поэтому типичный успешный поиск дает следующую структуру (простите за 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?)

ОТВЕТЫ

Ответ 1

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

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

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

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

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

Несколько других вещей:

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

Ответ 2

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

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

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