내정보

Guest 님
보유포인트
0
  • 재구매 할인
    30%
  • 컨텐츠 환불
    100%
  • 평점 포인트
    10%
  • 포인트 자동책정
    0%
콘텐츠 수 260

게시판 검색어 자동완성 애드온 (정식 버전)

최초 등록일: 2018.06.01 조회수 : 420

무료

5.0점 / 총 5명 참여
  • 구매자 40
  • 소개 게시판 검색창에서 제목+내용, 제목, 내용, 닉네임, 태그를 검색 대상으로 설정하고, 키워드를 입력할 때 기존 내용에 따라 자동완성을 시켜주는 애드온 
  • 설치경로 /addons/ap_autocomplete 
  • 지원환경 XpressEngine,Rhymix 
  • 라이선스 XPM License (재배포 금지) 
  • 분류 애드온
  • 제작자 윤삼
  • 다운로드
    ap_autocomplete.0.1.3.zip 11.04KB (잔여일 : -, 잔여횟수 : -)
    ap_autocomplete.0.1.5.zip 11.35KB (잔여일 : -, 잔여횟수 : -)
    ap_autocomplete.0.1.6.zip 11.59KB (잔여일 : -, 잔여횟수 : -)
    ap_autocomplete.0.1.7.zip 11.41KB (잔여일 : -, 잔여횟수 : -)

기본 기능

 

- 게시물 양이 많은 게시판의 경우, 사용자가 자동완성 검색어를 수집할 문서의 갯수를 임의로 제한할 수 있음 (구름이님 제안)

- 자동완성 검색어 리스트 출력시, 출력되는 갯수를 제한할 수 있음

- 검색 옵션을 '제목+내용'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성

- 검색 옵션을 '제목'으로 하면 기존의 '제목' 또는 '태그'를 수집해서 자동완성

- 검색 옵션을 '내용'으로 하면 기존의 '태그'를 수집해서 자동완성 (태그로 자동완성 기능은 웹지기님 제안)

- 검색 옵션을 '닉네임'으로 하면 기존의 '닉네임'을 수집해서 자동완성

- 검색 옵션을 '태그'로 하면 기존의 '태그'를 수집해서 자동완성

- 수집된 검색어들은 로컬 저장소(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 (개발 중에는 검색어 자동완성이 원활하지 않을 수 있음)

이 콘텐츠가 마음에 드셨다면 커피 한잔 (후원)

닫기
작가에게 커피 한잔(후원)을 사주세요.
profile 아픈 몸이
아프지 않을 때까지 가자

댓글 '46'

프로필 사진 profile
윤삼 2018.06.01 04:58 댓글 별점
기존 0.1.2 버전을 사용하시던 분들은 애드온 내의 ui 폴더를 삭제하셔도 됩니다.
프로필 사진 profile
일단놓고말해 2018.06.01 09:10 댓글 별점
와우~ 잘 작동되네요!!!
게시판 말고도 메인 통합검색창에서도 되게끔 설정이 되면 좋을 것 같아요!
혹시 제가 메인 통합검색창 설정법을 잘 몰라서 그런건가요?
프로필 사진 profile
웹지기 2018.06.01 09:26 댓글 별점
게시판이 아닌곳에서는 태그가 추천되면 좋을 것 같다는 생각을 해봤습니다.
프로필 사진 profile
윤삼 2018.06.01 09:50 댓글 별점
통합검색까지는 지원하지 않습니다. 애드온으로는 서버를 터뜨릴지도 몰라요;;; 다만 기존에 비슷한 모듈이 있었던 걸로 알고 있는데요. https://www.xpressengine.com/index.php?mid=download&package_id=22753410 이건가.. 암튼 통합검색까지 하려면 따로 모듈을 만들어야 할 거예요.
프로필 사진 profile
구름이 2018.06.01 18:50 댓글 별점
작업하느라 고생하셨습니다.
감사합니다.
프로필 사진 profile
윤삼 2018.06.01 23:12 댓글 별점
여러모로 신세 많이 지고 있는 걸요. 저야말로 언제나 감사드려요~☆
프로필 사진 profile
지구침략자 2018.06.02 12:50 댓글 별점
가려운곳을 항상 긁어 주시는 @윤삼님의 자료
감사히 사용하도록 하겠습니다..^^
프로필 사진 profile
윤삼 2018.06.02 13:51 댓글 별점
아이고, 잘 봐주셔서 감사합니다~!
프로필 사진 profile
마트몬 2018.06.03 11:29 댓글 별점
자료감사합니다. 애드온이 아닌 게시판 스킨에서 수정을 해야 할지도 모르겠습니다.
다름이 아니라 검색창이 아래와 같은 형태인 경우( 모달창 ??) 자동 검색되는 부분이 모달창 영역의의 아래로 보여지는 데 이런 경우 어디를 수정해야 할까요 ? 애드온 소스 내에서 z-index를 찾아봐도 보이질 않습니다.
https://martmonster.com/mart_news 에 상단 좌측 검색아이콘을 클릭 해 보시면 보실 수 있습니다.
프로필 사진 profile
윤삼 2018.06.03 12:08 댓글 별점
$(this).autocomplete('widget').css({
'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 같은 형식으로 추가해주면 됩니다.
프로필 사진 profile
웹지기 2018.06.03 12:47 댓글 별점
혹시 게시판이 아닌 곳의 input 에서 사이트의 tag를 추천해 주게 해주는 것은 어려운 작업이 될까요??
프로필 사진 profile
윤삼 2018.06.03 12:51 댓글 별점
혹시 통합검색 말씀이신가요.. 통합검색은 만들어놓은 게 있긴 한데... 다른 쪽 input이라면 어떤 식으로 DOM 요소를 잡아 애드온을 만들어야 할지 잘 모르겠습니다;;;
프로필 사진 profile
웹지기 2018.06.03 13:01 댓글 별점
겉모양이나 형식은 통합검색의 형태를 띄고 있습니다. 검색어를 실제적으로는 구글맞춤검색으로 보내긴 하지만 통함검색이라고 보시면 됩니다. 저희 사이트 레이아웃 상단에 있는 검색창과 간편검색페이지의 검색창을 보시면 소스형태는 통합검색창과 같은 모습일겁니다.
프로필 사진 profile
윤삼 2018.06.03 13:06 댓글 별점
네, 요소 잡는 것만 input의 name을 is_keyword에서 result로 바꿔서 사용해도 될 것 같네요.
공개 가능한 수준으로 애드온 한번 만져볼게요~
프로필 사진 profile
웹지기 2018.06.03 13:10 댓글 별점
실제 구글검색 결과페이지로 넘어가면 이때는 구글의 input이 보여지게 되는데요..

<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회 이상 검색한 것으로만 추천을 해줘서 실제적 추천이 어려우서 구글꺼는 사용 안하고 있거든요.
프로필 사진 profile
윤삼 2018.06.03 13:19 댓글 별점
아, 이게 관건이 되겠군요;;; 상황 재연이 어려워서 쫌 헤맬 거 같긴 하네요ㅜ
프로필 사진 profile
웹지기 2018.06.03 13:25 댓글 별점
name="search"
요때도 동작하게 하면 될 것 같은 단순한 생각인데 그게 아닌가 보네요 ㅋ

우선 더미로 만들어 레이아웃 상단의 검색창에 가능하다면 이후 이부분까지 도전해 보면 될 것 같아요.
프로필 사진 profile
웹지기 2018.06.03 13:25 댓글 별점
저희 레이아웃의 검색창에 검색어를 치고 검색을 하시면 실제 해당 페이지로 이동이 되서 소스를 보실 수 는 있어요.
프로필 사진 profile
윤삼 2018.06.03 14:08 댓글 별점
근데 구글 맞춤검색은 일반적인 통합검색처럼 검색 대상이 되는 모듈을 선택한다든가 하는 건 없는 거죠? 결국 검색대상이 되는 모듈을 선택하는 옵션을 넣어야겠네요. module_srl이라든가 mid를 직접 입력하는 식으로요;; 왜냐면 태그를 수집할 때 전체 모듈에서 갖고 올 게 아니라면 결국 module_srl이 있어야 할 거 같거든요.
프로필 사진 profile
웹지기 2018.06.03 14:18 댓글 별점
전체를 대상으로 하려고 하는 것이라 통합검색에서는 특정 모듈의 태그를 가져올 필요는 없을 것 같아요.
프로필 사진 profile
웹지기 2018.06.03 14:31 댓글 별점
0.1.4 로 업데이트 한 후 에
서버와 통신 문제로 자동완성 기능이 되지 않는다는 메시지창이 뜨네요.
- 우선 이전버전으로 복귀 했습니다.
프로필 사진 profile
윤삼 2018.06.03 16:11 댓글 별점
다른 분들 후기 추이를 좀 더 보고 문제점을 찾아보도록 하겠습니다.
프로필 사진 profile
웹지기 2018.06.03 16:47 댓글 별점
js 파일에 로드하는 파일 경로와 파일명이 좀 이상한 것이 확인되었습니다.
$.ajax({
url: './addons/ap_autocompleteIS/ap_autocompleteIS.php',


원래 파일명과 경로명으로 변경하니 괜찮은 것 같습니다. 이부분 확인 부탁드립니다.
프로필 사진 profile
윤삼 2018.06.03 17:10 댓글 별점
아, 그랬었네요. 통합검색 애드온도 만들다 복붙하는 과정에서 실수가 있었네요;; IS만 지우면 되구요.
애드온 파일도 0.1.5 버전으로 새로 올렸습니다~. 발견 감사합니다!
프로필 사진 profile
간장게장 2018.06.05 10:54 댓글 별점
0.1.6 설치했는데, 같은 현상의 에러 메시지를 보여주네요.
소스를 보니 언급된 IS 문자는 제거된 것 같은데...
프로필 사진 profile
웹지기 2018.06.05 10:59 댓글 별점
문제가 되는 페이지를 공개해주셔야 짐작이라도 할 수 있을 것 같네요.
프로필 사진 profile
간장게장 2018.06.05 13:51 댓글 별점
페이지 고침할 때만다 메시지가 뜨니 애드온 적용 해제시킨 상태라..
프로필 사진 profile
웹지기 2018.06.05 13:52 댓글 별점
1개 정도라도 적용해 놓고 공개하셔야 소스,에러 등을 보고 보여지는 부분에서 볼 수 있는 부분이 있습니다.
그런데 그냥 안된다고 하시면 찾기 어렵죠
프로필 사진 profile
윤삼 2018.06.05 11:34 댓글 별점
해당 문제는 0.1.5에서 개선됐던 건데요. 0.1.5에서도 서버 통신 문제 경고창이 뜨나요?
프로필 사진 profile
간장게장 2018.06.05 13:51 댓글 별점
0.1.5 설치해 보고 다시 리포트 하겠습니다. ^^;;
프로필 사진 profile
간장게장 2018.06.05 13:59 댓글 별점
0.1.5에서도 같은 현상이 나옵니다.

그리고 에러로그를 보니 아래와 같이 나타납니다.

[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

참고: 위 메시지 경로 앞부분은 일부 지웠습니다.
프로필 사진 profile
윤삼 2018.06.05 14:10 댓글 별점
_XE_PATH_에 오류가 있는 거 같기도 하네요; 해당 루트에 config.inc.php 가 없지는 않을 거 같은데요.
프로필 사진 profile
웹지기 2018.06.05 14:16 댓글 별점
사이트 루트에 xe가 설치되지 않는 경우가 종종 많이 있어요. 저희도 작년까지 xe 폴더에 설치가....
프로필 사진 profile
웹지기 2018.06.05 14:03 댓글 별점
XE 폴더에 설치된 경우의 문제 같은 느낌이 드네요.
프로필 사진 profile
간장게장 2018.06.05 14:05 댓글 별점
그렇네요.
'/config/config.inc.php' -> '/xe/config/config.inc.php'
이렇게 바꿨더니 에러 메시지가 사라졌습니다. -> 정상 작동
프로필 사진 profile
웹지기 2018.06.05 14:08 댓글 별점
require_once _XE_PATH_ . 'config/config.inc.php';
또는
require_once('../../../config/config.inc.php');

로 시도해 보실래요?
프로필 사진 profile
간장게장 2018.06.05 14:17 댓글 별점
알려주신 두 코드 모두 잘 되네요.
감사합니다.


정정합니다. --> 위 방법으로 안되는 것 같습니다.

캐시 특성인지 잘 모르겠는데요.. 애초 xe 를 경로에 넣고 잘 되길래
0.1.6을 덮어 씌우기만 했는데 에러 메시지가 없더라고요.. 코드가 다시 원복됐는데도 말이죠.
그리고 알려주신 코드를 넣고 했을 때 이상 없길래 다른 게시판을 오픈하니 다시 같은 에러가
나옵니다.
마치 한번 캐시 된 게 계속 남아 있어서 작동하는 것 같은...
다른 게시판으로 이동하니 다시 같은 에러가 나타나는 건.. 갑자기 머리고 혼란스러워졌습니다.
..
확인하니 로컬저장 시간 기능 때문이군요..
이 기능 때문에 앞서 xe 넣고 정상작동한 것을 위 코드로도 정상 작동으로 나타난 것 같습니다.
프로필 사진 profile
웹지기 2018.06.05 14:33 댓글 별점
위 코드로 교체 후 안된다는 건가요?
프로필 사진 profile
간장게장 2018.06.05 14:40 댓글 별점
알려주신 코드는 같은 에러 메시지를 보여주네요.
로컬 저장을 최소 (1분)로 바꾸고 테스트 해봤습니다.

일단 원래 코드에 /xe 를 추가해서 에러는 해결했습니다.
감사합니다.
프로필 사진 profile
웹지기 2018.06.05 14:43 댓글 별점
xe 경로를 찾아가는게 다른 모듈과 위젯에서 사용한 방법을 참조해서 2개를 선별한건데 애드온에서 안되나 보군요. @윤삼님께서 확인해 주셔야 겠네요.
프로필 사진 profile
웹지기 2018.06.05 14:53 댓글 별점
두가지 방법 중 하나의 경우 _XE_PATH_ 를 먼저 정해줘야 하나 보네요. 혹시 될지도 모르니 시도해 보세요.
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');
프로필 사진 profile
간장게장 2018.06.05 15:00 댓글 별점
위에 것은 잘 되네요.^^;;

아래 코드는 원래 define('__XE__', TRUE); 은 있었던 것이어서 이전에 알려주신 내용하고 같은 것으로 보입니다.
프로필 사진 profile
웹지기 2018.06.05 15:02 댓글 별점
아.. 원래 애드온에 해당 코드는 있었군요. 일단 되는건 찾았네요 ㅋ
프로필 사진 profile
간장게장 2018.06.05 15:02 댓글 별점
감사합니다.^^
프로필 사진 profile
웹지기 2018.06.05 15:05 댓글 별점
다른 하나도 알 것 같습니다.
require_once('../../config/config.inc.php');

제가 참조했던 자료는 경로가 한번 더 내려간 곳에 있는 php 파일이었던 것 같네요.
프로필 사진 profile
윤삼 2018.06.05 18:39 댓글 별점
@간장게장 @웹지기 _XE_PATH_ 로 했었던 것 같은데 다른 작업이랑 멀티태스킹을 하다보니 중간에 뭔가 바꿔치기됐나봐요ㅠ 덕분에 오류 수정할 수 있게 됐네요. 감사합니다~
서버에 요청 중입니다. 잠시만 기다려 주십시오...