사용자 정의로 구축한 ajax [div] 기반 동적 드롭다운이 있습니다.
입력] 상자가 있는데, 온키업
을 하면 div
로 결과를 반환하는 Ajax 검색을 실행하고 innerHTML
을 사용하여 다시 끌어옵니다. 이러한 div
는 모두 mouseover
를 강조 표시하므로 일반적으로 검색에 성공하면 다음과 같은 구조가 됩니다(세미코드는 용서해 주세요):
[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 요소 뒤에 있는 중요한 기능을 놓치고 있습니다. '옵션' 사이에서 키보드를 아래로 또는 위로 누를 수 없습니다.
자바스크립트가 키보드 이벤트를 처리한다는 것을 알고 있지만; 좋은 가이드를 찾을 수 없었습니다. (물론, 후속 질문은 결국 엔트리
를 사용하여 온클릭
이벤트를 트리거할 수 있는가?)입니다.
당신이 해야 할 일은 id="results"
를 사용하여 div
에 이벤트 리스너를 첨부하는 것입니다. 이 작업은 div
를 생성할 때 onkeyup
, onkeydown
등의 속성을 추가하거나 JavaScript를 사용하여 첨부할 수 있습니다.
두 가지 이유로 YUI, jQuery, Prototype 등과 같은 AJAX 라이브러리를 사용하는 것을 권장합니다:
추가 이벤트는 잊어버리고 야후의 이벤트 유틸리티를 사용하세요는 이벤트 라이브러리가 제공하는 기능에 대한 좋은 요약을 제공합니다. jQuery, Prototype 등에서 제공하는 이벤트 라이브러리도 비슷한 기능을 제공한다고 확신합니다.
이 글이 이해가 되지 않는다면 이 문서를 먼저 살펴본 다음 원본 글을 다시 읽어보세요(저는 이벤트 라이브러리를 사용한 후에 이 글이 훨씬 더 이해가 잘 되었습니다).
몇 가지 다른 사항도 있습니다:
온키업
등의 속성을 작성하는 것보다 훨씬 더 많은 제어 기능을 사용할 수 있습니다. 정말 간단한 작업을 하고 싶지 않다면 저는 자바스크립트를 사용할 것입니다.제 생각에는 현재 드롭다운 목록의 항목을 반영하는 일종의 데이터 구조를 자바스크립트에서 유지해야 할 것 같습니다. 또한 현재 활성/선택된 항목에 대한 참조가 필요합니다.
키업또는
키다운`이 실행될 때마다 데이터 구조에서 활성/선택된 항목에 대한 참조를 업데이트합니다. UI에 강조 표시 정보를 제공하려면 항목의 활성/선택 여부에 따라 CSS를 통해 스타일이 지정되는 클래스 이름을 추가하거나 제거합니다.
또한 이것은 큰 문제는 아니지만 innerHTML
은 실제로 표준이 아닙니다(데이터를 생성하는 표준 방법은 createTextNode()
, createElement()
및 appendChild()
를 살펴보세요). 또한 HTML 어트리뷰트에서 이벤트 핸들러를 첨부하는 대신 자바스크립트에서 이벤트 핸들러를 첨부하는 방법을 살펴볼 수도 있습니다.