기본 기능
- 게시물 양이 많은 게시판의 경우, 사용자가 자동완성 검색어를 수집할 문서의 갯수를 임의로 제한할 수 있음 (구름이님 제안)
- 자동완성 검색어 리스트 출력시, 출력되는 갯수를 제한할 수 있음
- 검색 옵션을 '제목+내용'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성
- 검색 옵션을 '제목'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성
- 검색 옵션을 '내용'으로 하면 기존의 '태그'를 수집해서 자동완성 (태그로 자동완성 기능은 웹지기님 제안)
- 검색 옵션을 '닉네임'으로 하면 기존의 '닉네임'을 수집해서 자동완성
- 검색 옵션을 '태그'로 하면 기존의 '태그'를 수집해서 자동완성
- 수집된 검색어들은 로컬 저장소(localStorage)로 저장하며, 분 단위로 시간을 설정하고 해당 시간이 지나면 새로 추가된 문서로부터도 검색어를 추가 수집할 수 있음
0.1.7 업데이트 (2018-06-09)
- 서버 부하 이슈로 페이지 로드시 ajax 호출을 검색창 focus 시점으로 변경 (기존의 셀렉트 박스 변경시 ajax 호출은 유지)
- 기타 소스 코드 정리
0.1.6 업데이트 (2018-06-04)
- 검색어 유사성에 우선하여 자동완성 리스트 재배열
- 입력된 검색어가 완성형 글자가 아니더라도 리스트에서 유사한 글자를 찾고 자동완성 리스트에서는 하이라이트 표시
0.1.5 업데이트 (2018-06-03)
- 검색어 하이라이트 및 색상 지정 옵션 제공
- 영어를 소문자/대문자 구분 없이 검색
- 검색어의 html entity 디코딩 과정 간소화 (xe에서 자유롭지 못한 문제가 있었음)
- 일부 게시판을 위해 z-index값 설정 옵션 지원
동작 설명
- 애드온 설정에서 옵션 체크
- 애드온 변수를 js 파일에 전달
- jQuery.ui가 로드되지 않은 게시판의 경우엔, /common/js/plugins/ui의 로컬 js와 css 파일을 별도로 로드
- 브라우저가 '파이어폭스'일 경우, 한글 검색 문제 해결을 위한 keydown 이벤트 지연 설정 (구름이님 조언)
- js 파일에서 ajax를 이용, 별도의 php 파일과 xml 쿼리 파일로부터 서버의 자동완성 키워드 데이터를 json 형태로 호출
- Hangul.js 라이브러리를 이용하여 입력값과 자동완성 검색어의 자모음 분리 검색 후 자모음 통합 출력 ( https://github.com/e-/Hangul.js )
- 호출되는 json 데이터는
{모듈번호1 :
{전체 : {title : [~~~], nick_name : [~~~], tag : [~~~]}
, 카테고리1 : {title : [~~~], nick_name : [~~~], tag : [~~~]}
, 카테고리2 : {title : [~~~], nick_name : [~~~], tag : [~~~]}
, 카테고리3 ~~~ }
, 모듈번호 2 :
{전체 : ~~ }} 의 형식으로 계층적으로 설정
- 데이터를 사용자의 브라우저 localStorage에 저장함으로써, 서버의 DB 쿼리 실행 빈도를 (최소화하고 싶지만ㅠ) 낮춤
- 애드온 설정에서 입력해둔 '로컬 저장 기한'이 지나면 localStorage의 데이터를 비우고, 페이지 로드 및 검색 옵션 선택을 할 때마다 다시 데이터를 축적
이 애드온을 사용하면 좋은 게시판
- FAQ 게시판, 태그 입력이 활성화된 게시판, 게시물이 아주 많지는 않은 게시판(ㅠ), 사전/위키/웹툰/웹소설처럼 구성된 게시판(그런 게 있나요;;;)
테스트 환경
- 크롬 66.0.3359.181 / IE 11.48.17134.0 / 엣지 42.17134.1.0
- 라이믹스 1.8.42 / PHP 버전: 7.0.22
- XE 1.8.43 / PHP 버전: 5.5
- 스포어 웹호스팅, 카페24 웹호스팅
데모
- https://bit.ly/2IECAeU (개발 중에는 검색어 자동완성이 원활하지 않을 수 있음)