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

Question

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

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

Answer 1

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

Я бы рекомендовал вам использовать библиотеку AJAX, например ЮИ, jQuery, Опытный образец, и т. д.по двум причинам:

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

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

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

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

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

Answer 2

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

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

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