추천 수 0 댓글 47
Extra Form
자료 소개 게시판 검색창에서 키워드를 입력할 때 검색 옵션에 따라 검색어를 자동완성 시켜주는 애드온
설치 경로 ./addons/ap_autocomplete
테스트 환경 XpressEngine1,Rhymix 1.x
라이선스 GPL v2
이름 버전 날짜 다운수
ap_autocomplete.0.1.7.zip 0.1.7 2018-06-09 86
ap_autocomplete.0.1.6.zip 0.1.6 2018-06-04 29
ap_autocomplete.0.1.5.zip 0.1.5 2018-06-03 14
ap_autocomplete.0.1.3.zip 0.1.3 2018-06-01 25

기본 기능

 

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

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

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

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

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

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

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

- 수집된 검색어들은 로컬 저장소(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
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile
    좋은 자료 감사합니다!
  • profile
    @간장게장 @웹지기 _XE_PATH_ 로 했었던 것 같은데 다른 작업이랑 멀티태스킹을 하다보니 중간에 뭔가 바꿔치기됐나봐요ㅠ 덕분에 오류 수정할 수 있게 됐네요. 감사합니다~
  • profile
    0.1.4 로 업데이트 한 후 에
    서버와 통신 문제로 자동완성 기능이 되지 않는다는 메시지창이 뜨네요.
    - 우선 이전버전으로 복귀 했습니다.
  • profile profile
    다른 분들 후기 추이를 좀 더 보고 문제점을 찾아보도록 하겠습니다.
  • profile profile
    js 파일에 로드하는 파일 경로와 파일명이 좀 이상한 것이 확인되었습니다.
    $.ajax({
    url: './addons/ap_autocompleteIS/ap_autocompleteIS.php',


    원래 파일명과 경로명으로 변경하니 괜찮은 것 같습니다. 이부분 확인 부탁드립니다.
  • profile profile
    아, 그랬었네요. 통합검색 애드온도 만들다 복붙하는 과정에서 실수가 있었네요;; IS만 지우면 되구요.
    애드온 파일도 0.1.5 버전으로 새로 올렸습니다~. 발견 감사합니다!
  • profile profile
    0.1.6 설치했는데, 같은 현상의 에러 메시지를 보여주네요.
    소스를 보니 언급된 IS 문자는 제거된 것 같은데...
  • profile profile
    문제가 되는 페이지를 공개해주셔야 짐작이라도 할 수 있을 것 같네요.
  • profile profile
    해당 문제는 0.1.5에서 개선됐던 건데요. 0.1.5에서도 서버 통신 문제 경고창이 뜨나요?
  • profile profile
    페이지 고침할 때만다 메시지가 뜨니 애드온 적용 해제시킨 상태라..
  • profile profile
    0.1.5 설치해 보고 다시 리포트 하겠습니다. ^^;;
  • profile profile
    1개 정도라도 적용해 놓고 공개하셔야 소스,에러 등을 보고 보여지는 부분에서 볼 수 있는 부분이 있습니다.
    그런데 그냥 안된다고 하시면 찾기 어렵죠
  • profile profile
    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 profile
    XE 폴더에 설치된 경우의 문제 같은 느낌이 드네요.
  • profile profile
    그렇네요.
    '/config/config.inc.php' -> '/xe/config/config.inc.php'
    이렇게 바꿨더니 에러 메시지가 사라졌습니다. -> 정상 작동
  • profile profile
    require_once _XE_PATH_ . 'config/config.inc.php';
    또는
    require_once('../../../config/config.inc.php');

    로 시도해 보실래요?
  • profile profile
    _XE_PATH_에 오류가 있는 거 같기도 하네요; 해당 루트에 config.inc.php 가 없지는 않을 거 같은데요.
  • profile profile
    사이트 루트에 xe가 설치되지 않는 경우가 종종 많이 있어요. 저희도 작년까지 xe 폴더에 설치가....
  • profile profile
    알려주신 두 코드 모두 잘 되네요.
    감사합니다.


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

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

    일단 원래 코드에 /xe 를 추가해서 에러는 해결했습니다.
    감사합니다.
  • profile profile
    xe 경로를 찾아가는게 다른 모듈과 위젯에서 사용한 방법을 참조해서 2개를 선별한건데 애드온에서 안되나 보군요. @윤삼님께서 확인해 주셔야 겠네요.
  • profile profile
    두가지 방법 중 하나의 경우 _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 profile
    위에 것은 잘 되네요.^^;;

    아래 코드는 원래 define('__XE__', TRUE); 은 있었던 것이어서 이전에 알려주신 내용하고 같은 것으로 보입니다.
  • profile profile
    아.. 원래 애드온에 해당 코드는 있었군요. 일단 되는건 찾았네요 ㅋ
  • profile profile
    감사합니다.^^
  • profile profile
    다른 하나도 알 것 같습니다.
    require_once('../../config/config.inc.php');

    제가 참조했던 자료는 경로가 한번 더 내려간 곳에 있는 php 파일이었던 것 같네요.
  • profile
    혹시 게시판이 아닌 곳의 input 에서 사이트의 tag를 추천해 주게 해주는 것은 어려운 작업이 될까요??
  • profile profile
    혹시 통합검색 말씀이신가요.. 통합검색은 만들어놓은 게 있긴 한데... 다른 쪽 input이라면 어떤 식으로 DOM 요소를 잡아 애드온을 만들어야 할지 잘 모르겠습니다;;;
  • profile profile
    겉모양이나 형식은 통합검색의 형태를 띄고 있습니다. 검색어를 실제적으로는 구글맞춤검색으로 보내긴 하지만 통함검색이라고 보시면 됩니다. 저희 사이트 레이아웃 상단에 있는 검색창과 간편검색페이지의 검색창을 보시면 소스형태는 통합검색창과 같은 모습일겁니다.
  • profile profile
    네, 요소 잡는 것만 input의 name을 is_keyword에서 result로 바꿔서 사용해도 될 것 같네요.
    공개 가능한 수준으로 애드온 한번 만져볼게요~
  • profile profile
    실제 구글검색 결과페이지로 넘어가면 이때는 구글의 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 profile
    아, 이게 관건이 되겠군요;;; 상황 재연이 어려워서 쫌 헤맬 거 같긴 하네요ㅜ
  • profile profile
    name="search"
    요때도 동작하게 하면 될 것 같은 단순한 생각인데 그게 아닌가 보네요 ㅋ

    우선 더미로 만들어 레이아웃 상단의 검색창에 가능하다면 이후 이부분까지 도전해 보면 될 것 같아요.
  • profile profile
    저희 레이아웃의 검색창에 검색어를 치고 검색을 하시면 실제 해당 페이지로 이동이 되서 소스를 보실 수 는 있어요.
  • profile profile
    근데 구글 맞춤검색은 일반적인 통합검색처럼 검색 대상이 되는 모듈을 선택한다든가 하는 건 없는 거죠? 결국 검색대상이 되는 모듈을 선택하는 옵션을 넣어야겠네요. module_srl이라든가 mid를 직접 입력하는 식으로요;; 왜냐면 태그를 수집할 때 전체 모듈에서 갖고 올 게 아니라면 결국 module_srl이 있어야 할 거 같거든요.
  • profile profile
    전체를 대상으로 하려고 하는 것이라 통합검색에서는 특정 모듈의 태그를 가져올 필요는 없을 것 같아요.
  • ?
    자료감사합니다. 애드온이 아닌 게시판 스킨에서 수정을 해야 할지도 모르겠습니다.
    다름이 아니라 검색창이 아래와 같은 형태인 경우( 모달창 ??) 자동 검색되는 부분이 모달창 영역의의 아래로 보여지는 데 이런 경우 어디를 수정해야 할까요 ? 애드온 소스 내에서 z-index를 찾아봐도 보이질 않습니다.
    https://martmonster.com/mart_news 에 상단 좌측 검색아이콘을 클릭 해 보시면 보실 수 있습니다.
  • ? profile
    $(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
    가려운곳을 항상 긁어 주시는 @윤삼님의 자료
    감사히 사용하도록 하겠습니다..^^
  • profile profile
    아이고, 잘 봐주셔서 감사합니다~!
  • profile
    작업하느라 고생하셨습니다.
    감사합니다.
  • profile profile
    여러모로 신세 많이 지고 있는 걸요. 저야말로 언제나 감사드려요~☆
  • profile
    와우~ 잘 작동되네요!!!
    게시판 말고도 메인 통합검색창에서도 되게끔 설정이 되면 좋을 것 같아요!
    혹시 제가 메인 통합검색창 설정법을 잘 몰라서 그런건가요?
  • profile profile
    게시판이 아닌곳에서는 태그가 추천되면 좋을 것 같다는 생각을 해봤습니다.
  • profile profile
    통합검색까지는 지원하지 않습니다. 애드온으로는 서버를 터뜨릴지도 몰라요;;; 다만 기존에 비슷한 모듈이 있었던 걸로 알고 있는데요. https://xe1.xpressengine.com/index.php?mid=download&package_id=22753410 이건가.. 암튼 통합검색까지 하려면 따로 모듈을 만들어야 할 거예요.
  • profile
    기존 0.1.2 버전을 사용하시던 분들은 애드온 내의 ui 폴더를 삭제하셔도 됩니다.