Как в JavaScript использовать клавиатуру для перемещения по опциям в раскрывающимся меню

Использование клавиатуры для перемещения в раскрывающимся меню

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

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

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

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

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

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

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

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

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

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

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

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

Http Auth в букмарклете Firefox

Http Auth в букмарклете Firefox

Я пытаюсь создать букмарклет для размещения закладок del_icio_us в отдельной учетной записи. Я тестировал это из командной строки, например: wget -O - --no-check-certificate \ "https_seconduser:thepassword@ api_del_icio_us/v1/posts/add?url=http_seet_dk&description=test" Это прекрасно работает. Затем я захотел создать закладку в своем Firefox. Я погуглил, нашел кусочки и в итоге получил следующее: javascript:void( open('https_seconduser:password@ api_del_icio_us/v1/posts/add?url=' +encodeURIComponent(location.href) +'&description='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=500,height=250' ) ); Но все, что происходит, это то, что я получаю это от del_icio_us: <?xml version="1.0" standalone="yes"?> <result code="access denied" /> <!-- fe04_api_del_ac4_yahoo_net uncompressed/chunked…

Подробнее »

Как я могу превратить строку HTML в объект DOM в расширении FF?

Превратите строку HTML в объект DOM

Как я могу превратить строку HTML в объект DOM в расширении Firefox? Я загружаю веб-страницу (HTML-тег-суп) с XMLHttpRequest и хочу взять выходные данные и превратить их в объект DOM, к которому затем можно будет выполнять запросы XPATH. Как преобразовать строку в объект DOM? Похоже, что общее решение состоит в том, чтобы создать скрытый iframe и бросить в него содержимое строки. Ходили разговоры об обновлении DOMParser для поддержки text/html, но начиная с Firefox 3.0.1 вы все равно получаете NS_ERROR_NOT_IMPLEMENTED если попробуете. Есть ли какой-либо вариант, кроме использования скрытого трюка iframe? А если нет, то как лучше…

Подробнее »

Вызов функции ASP . NET из JavaScript?

Вызов функции ASP . NET

Я пишу веб-страницу в ASP . NET. У меня есть код JavaScript, и у меня есть кнопка отправки с событием клика. Можно ли вызвать метод, который я создал в ASP, с помощью события click JavaScript? Вы должны использовать некоторую библиотеку Ajax, например: Anthem 20 ответов Что ж, если вы не хотите делать это с помощью Ajax или каким-либо другим способом и просто хотите, чтобы происходила обычная обратная передача ASP . NET, вот как вы это делаете…

Подробнее »