게시판 검색어 자동완성 애드온
| 자료 유형 | 애드온 |
|---|---|
| 간단한 소개 | 게시판 검색창에서 키워드를 입력할 때 검색 옵션에 따라 검색어를 자동완성 시켜주는 애드온 |
| 설치 경로 | ./addons/ap_autocomplete |
| 코어 지원 범위 | XE 1.x, Rhymix 1.9 |
| PHP 지원 범위 | 기타 |
| 자료 구분 | 공개 자료 |
| 라이선스 | GPL v2 |
| 파일명 | 버전 | 날짜 | 용량 | 다운 |
|---|---|---|---|---|
| ap_autocomplete.0.1.7.zip | 0.1.7 | 2018.06.09 | 11.4KB | 94 |
| ap_autocomplete.0.1.6.zip | 0.1.6 | 2018.06.04 | 11.6KB | 30 |
| ap_autocomplete.0.1.5.zip | 0.1.5 | 2018.06.03 | 11.3KB | 15 |
| ap_autocomplete.0.1.3.zip | 0.1.3 | 2018.05.31 | 11.0KB | 26 |
기본 기능
- 게시물 양이 많은 게시판의 경우, 사용자가 자동완성 검색어를 수집할 문서의 갯수를 임의로 제한할 수 있음 (구름이님 제안)
- 자동완성 검색어 리스트 출력시, 출력되는 갯수를 제한할 수 있음
- 검색 옵션을 '제목+내용'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성
- 검색 옵션을 '제목'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성
- 검색 옵션을 '내용'으로 하면 기존의 '태그'를 수집해서 자동완성 (태그로 자동완성 기능은 웹지기님 제안)
- 검색 옵션을 '닉네임'으로 하면 기존의 '닉네임'을 수집해서 자동완성
- 검색 옵션을 '태그'로 하면 기존의 '태그'를 수집해서 자동완성
- 수집된 검색어들은 로컬 저장소(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 (개발 중에는 검색어 자동완성이 원활하지 않을 수 있음)
댓글 47
게시판 말고도 메인 통합검색창에서도 되게끔 설정이 되면 좋을 것 같아요!
혹시 제가 메인 통합검색창 설정법을 잘 몰라서 그런건가요?
감사합니다.
감사히 사용하도록 하겠습니다..^^
다름이 아니라 검색창이 아래와 같은 형태인 경우( 모달창 ??) 자동 검색되는 부분이 모달창 영역의의 아래로 보여지는 데 이런 경우 어디를 수정해야 할까요 ? 애드온 소스 내에서 z-index를 찾아봐도 보이질 않습니다.
https://martmonster.com/mart_news 에 상단 좌측 검색아이콘을 클릭 해 보시면 보실 수 있습니다.
'width': ($(this).outerWidth() + 'px'),
'-webkit-box-sizing': 'border-box',
'-moz-box-sizing': 'border-box',
'box-sizing': 'border-box'
});
라는 부분이 있을 텐데요.
'box-sizing': 'border-box' 끝에 쉼표를 붙이구요.
그 다음 줄에
'z-index': 9999 같은 형식으로 추가해주면 됩니다.
공개 가능한 수준으로 애드온 한번 만져볼게요~
<input autocomplete="off" type="text" size="10" class="gsc-input" name="search" title="검색" id="gsc-i-id1" dir="ltr" spellcheck="false" placeholder="맞춤검색" style="width: 100%; padding: 0px; border: none; margin: -0.0625em 0px 0px; height: 1.25em; outline: none; text-indent: 0px; background: rgb(255, 255, 255);">
여기에서는 위와 같은 소스입니다. name이 search로 되어있구요.
구글에서도 자동완성을 제공하지만 제가 사용을 하지 않고 있어요. 전일에 10회 이상 검색한 것으로만 추천을 해줘서 실제적 추천이 어려우서 구글꺼는 사용 안하고 있거든요.
요때도 동작하게 하면 될 것 같은 단순한 생각인데 그게 아닌가 보네요 ㅋ
우선 더미로 만들어 레이아웃 상단의 검색창에 가능하다면 이후 이부분까지 도전해 보면 될 것 같아요.
서버와 통신 문제로 자동완성 기능이 되지 않는다는 메시지창이 뜨네요.
- 우선 이전버전으로 복귀 했습니다.
$.ajax({
url: './addons/ap_autocompleteIS/ap_autocompleteIS.php',
원래 파일명과 경로명으로 변경하니 괜찮은 것 같습니다. 이부분 확인 부탁드립니다.
애드온 파일도 0.1.5 버전으로 새로 올렸습니다~. 발견 감사합니다!
소스를 보니 언급된 IS 문자는 제거된 것 같은데...
그런데 그냥 안된다고 하시면 찾기 어렵죠
그리고 에러로그를 보니 아래와 같이 나타납니다.
[05-Jun-2018 04:56:02 UTC] PHP Warning: require_once(/public_html/config/config.inc.php): failed to open stream: No such file or directory in /public_html/xe/addons/ap_autocomplete/ap_autocomplete.php on line 4
[05-Jun-2018 04:56:02 UTC] PHP Fatal error: require_once(): Failed opening required '/config/config.inc.php' (include_path='.:/opt/cpanel/ea-php70/root/usr/share/pear') in /xe/addons/ap_autocomplete/ap_autocomplete.php on line 4
참고: 위 메시지 경로 앞부분은 일부 지웠습니다.
'/config/config.inc.php' -> '/xe/config/config.inc.php'
이렇게 바꿨더니 에러 메시지가 사라졌습니다. -> 정상 작동
또는
require_once('../../../config/config.inc.php');
로 시도해 보실래요?
감사합니다.
정정합니다. --> 위 방법으로 안되는 것 같습니다.
캐시 특성인지 잘 모르겠는데요.. 애초 xe 를 경로에 넣고 잘 되길래
0.1.6을 덮어 씌우기만 했는데 에러 메시지가 없더라고요.. 코드가 다시 원복됐는데도 말이죠.
그리고 알려주신 코드를 넣고 했을 때 이상 없길래 다른 게시판을 오픈하니 다시 같은 에러가
나옵니다.
마치 한번 캐시 된 게 계속 남아 있어서 작동하는 것 같은...
다른 게시판으로 이동하니 다시 같은 에러가 나타나는 건.. 갑자기 머리고 혼란스러워졌습니다.
..
확인하니 로컬저장 시간 기능 때문이군요..
이 기능 때문에 앞서 xe 넣고 정상작동한 것을 위 코드로도 정상 작동으로 나타난 것 같습니다.
로컬 저장을 최소 (1분)로 바꾸고 테스트 해봤습니다.
일단 원래 코드에 /xe 를 추가해서 에러는 해결했습니다.
감사합니다.
define('__XE__', TRUE);
define('_XE_PATH_', str_replace('addons/ap_autocomplete/ap_autocomplete.php', '', str_replace('\\', '/', __FILE__)));
require_once _XE_PATH_ . 'config/config.inc.php';
이것도 되려나요?
define('__XE__', TRUE);
require_once('../../../config/config.inc.php');
아래 코드는 원래 define('__XE__', TRUE); 은 있었던 것이어서 이전에 알려주신 내용하고 같은 것으로 보입니다.
require_once('../../config/config.inc.php');
제가 참조했던 자료는 경로가 한번 더 내려간 곳에 있는 php 파일이었던 것 같네요.