Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

[PHP, jQuery Tutorial] 검색어 자동완성 구현하기


 
만화책 제목으로 검색할 때, 앞부분만 맞으면 아래에 목록을 표시하는 기능을 구현하였다. 요즘은 너무나도 흔한 기능이지만, 꽤 오랫동안 구현하고자 생각만 하다가 이번 리뉴얼에 맞춰서 작업을 했다. 처음에 개념이 잘 안 잡혀서 고생한 탓에, 최소한의 소스로 정리하였다.
 

 
html은 검색어 입력창과 하단에 임시로 보여질 레이어 영역만 잡아놓는다. 입력창에서 키 입력할 때마다 suggestions.php를 호출하여, 입력한 키워드로 시작하는 만화를 검색한다. 아래 소스가 suggestions.php 다.
 

 
목록은 최대 5개까지만 보여지도록 설정하고, 직접 클릭하면 해당 만화 정보 페이지로 넘어가고 엔터키를 치면 입력한 검색어에 해당하는 검색결과가 나오도록 하였다.
 
키를 하나씩 입력할 때마다 쿼리를 돌리느라 약간의 딜레이가 있다는 점, 한글 형태소 처리가 안 되어 있어서 한글자 한글자 완성될 때만 유효하다는 점 (‘드ㄹ’ 까지만 쓰면 ‘드래곤 볼’ 이 안 나옴), 키보드 위/아래 버튼으로 고를 수 없다는 점이 남은 개선사항이다. 다른 것은 몰라도 키보드 처리는 필수인 것 같아서, 빨리 처리해봐야겠다.