Javascript клавиатура события праймер? (или, вернее: помогите мне с моим настраиваемым выпадающим списком)

Question

Мне нужна помощь в завершении моего настраиваемого динамического выпадающего списка 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] 

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

Тем не менее, я пропускаю большинство важных функций за регулярными элементами HTML, то есть я не могу отключить клавиатуру или «между ними». Как мне это сделать? Я знаю, что javascript обрабатывает события клавиатуры, но; Я не смог найти хорошего руководства о том, как это сделать. (Конечно, следующий вопрос к этому в конечном итоге будет: могу ли я использовать <ENTER> для запуска этого события onclick?)

Answer 1

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

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

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

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

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

Несколько других вещей:

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

Answer 2

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

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

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