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

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

14 голосов
/ 07 августа 2008

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

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

Ответы [ 2 ]

5 голосов
/ 18 августа 2008

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

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

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

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

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

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

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

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

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

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

...