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