Как с клавиатуры вниз или вверх между выпадающими «вариантами»?
У меня есть настраиваемый динамический раскрывающийся список на основе ajax [div].
У меня есть поле [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?)
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я подумал, что вам нужно поддерживать некоторую форму структуры данных в JavaScript, которая отражает элементы в текущем раскрывающемся списке. Вам также понадобится ссылка на текущий активный / выбранный элемент.
Каждый раз, когда запускается keyup или keydown, обновляйте ссылку на активный / выбранный элемент в структуре данных. Чтобы предоставить информацию о выделении в пользовательском интерфейсе, добавьте или удалите имя класса, стилизованное с помощью CSS, в зависимости от того, активен / выбран элемент или нет.
Кроме того, это не так уж важно, но innerHTML не совсем стандартный (посмотрите createTextNode(), createElement() и appendChild(), чтобы узнать о стандартных способах создания данных). Вы также можете узнать о присоединении обработчиков событий в JavaScript, а не в атрибуте HTML.
Что вам нужно сделать, так это прикрепить прослушиватели событий к div с помощью id = "results". Вы можете сделать это, добавив атрибуты onkeyup, onkeydown и т. д. К div при его создании, или вы можете прикрепить их с помощью JavaScript.
Я рекомендую вам использовать библиотеку AJAX, такую как Юй, jQuery, Прототип и т. д., По двум причинам:
- Похоже, вы пытаетесь создать элемент управления Автозаполнение, который должен предоставить большинство библиотек AJAX. Если вы можете использовать существующий компонент, вы сэкономите много времени.
- Даже если вы не хотите использовать элемент управления, предоставляемый библиотекой, все библиотеки предоставляют библиотеки событий, которые помогают скрыть различия между API-интерфейсами событий, предоставляемыми разными браузерами.
Забудьте о addEvent, используйте служебную программу Yahoo! дает хорошее представление о том, что должна предоставить вам библиотека событий. Я почти уверен, что библиотеки событий, предоставляемые jQuery, Prototype и др. al. предоставляют аналогичные функции.
Если эта статья пролетит у вас над головой, сначала взгляните на эта документация, а затем перечитайте исходную статью (я обнаружил, что статья стала гораздо более понятной после того, как я использовал библиотеку событий).
Еще пара вещей:
- Использование JavaScript дает вам гораздо больше контроля, чем запись атрибутов
onkeyupи т. д. В ваш HTML. Если вы не хотите что-то делать действительно просто, я бы использовал JavaScript. - Если вы пишете свой собственный код для обработки событий клавиатуры, хорошая ссылка на ключевой код действительно удобен.