제가 운영하고 있는 사이트 Developer's 지식창고 ( http://www.insford.com/developer )에 네이버의 추천검색어 기능을 만들어 보았습니다. ^^;

글을 올릴때 태그를 같이 올릴 수 있게 하고 키보드를 입력할때마다 태그를 검색해서 보여주게 됩니다. 아직 글의 개수가 얼마 되지 않아서 LIKE절로 검색하고있습니다.

마우스 오버시 색이 변하구요 키보드를 위아래로 움직여도 변합니다. 해당위치에서 엔터치면 검색이 되구요.
키보드 위아래로 움직이는거 구현하는데에서 애를 많이 먹었어요 ㅠㅠ;;

JSON방식으로 코딩을 하였구요 3개의 클래스로 구현을 했습니다.

* ArrayList.js 파일
Array() 객체로 쓰기가 약간 불편해서 Java의 ArrayList기능을 살짝 섞어서 만든 클래스 입니다.

* Keyword.js 파일
이 파일에는 이벤트 등록/삭제 하는 함수와 검색어들을 관리하는 KeywordClass 클래스 ALink클래스가 있습니다.

* ALink
 - 검색어 각각 마다 DIV태그를 만들고 마우스 오버롤로 배경색을 바꿉니다.
 - 마우스 클릭 이벤트로 검색창에 검색어를 넣는 이벤트를 호출합니다.

* KeywordClass


  - 생성할때 총 4개의 변수가 필요한데 input창, 카테고리1, 카테고리2, 결과창(숨겨놓은DIV) 가 필요합니다.
- input과 result는 반드시 필요하고, selVelue, category 두개는 수정하여 사용하시면 됩니다.
- 수정하실때 AJAX전송함수도 같이 수정해야 합니다. ( 저는 카테고리별로 검색하였슴 )
- 콜백함수 결과를 파싱해서 추가하는 부분도 수정해서 사용하시면 됩니다.
 - input창에 click, keydown, blur 이벤트가 생성됩니다.
 - 클릭이나 키보드가 입력될때 서버와 통신하여 추천검색어를 화면에 출력해줍니다.
 - blur이벤트가 발생하면 결과창이 안보이게 됩니다.
 - keydown 이벤트시 방향키 up,down일경우 선택한 검색어가 위아래로 움직입니다. 맨 위일경우 up이면 사라지고, 아무것도없을경우 down이면 다시 검색합니다.

* 사용법
 - 위설명대로 KeywordClass파일을 수정한 후 위 사진처럼 등록하셔서 사용하시면 됩니다.
 - objKeyword는 전역변수로 선언해주세요.
 - addThis 함수에는 객체이름을 등록해주시면 됩니다.


* 설명이 너무 허접해서.. ㅠㅠ 질문이 있으시면 댓글이나 이멜로 ^^ insford@nate.com