추천 수 0 댓글 69
Extra Form
자료 소개 통합검색 검색창에서 키워드를 입력할 때 기존 '태그'를 참조하여 검색어를 자동완성 시켜주는 애드온
설치 경로 ./addons/ap_autocompleteIS
테스트 환경 XpressEngine1,Rhymix 1.x
라이선스 GPL v2
이름 버전 날짜 다운수
ap_autocompleteIS.0.1.5.zip 0.1.5 2018-06-09 100
ap_autocompleteIS.0.1.4.zip 0.1.4 2018-06-05 30
ap_autocompleteIS.0.1.3.zip 0.1.3 2018-06-05 18
ap_autocompleteIS.0.1.2.zip 0.1.2 2018-06-05 19

 

- '통합검색 검색어 자동완성 애드온'입니다.

- 통합검색 검색창에서 키워드를 입력할 때 기존 '태그'에 따라 검색어를 자동완성 시켜주는 애드온

- 웹지기님 도움으로! 구글 맞춤검색에도 적용 가능할 수 있게 짜봤습니다.

 

 

기본 기능

 

- 기본 통합검색 또는 구글 맞춤검색 중 하나를 선택하여 애드온 적용

- 구글 맞춤검색 선택시 자동완성 키워드 추출에 지연시간을 설정 (기본값 2000 = 2초)

- 검색창의 자동완성 키워드를 '태그' 또는 '제목'으로부터 선택적으로 추출

- 자동완성 키워드를 수집할 모듈의 mid 직접 입력 가능. 미입력시 '기본 통합검색'은 통합검색 모듈(integration_search)에 지정되어 있는 모듈로부터, '구글 맞춤검색'은 사이트의 전체 모듈로부터 자동완성 키워드를 수집함

- 수집할 키워드의 최대 갯수 제한 가능. 미지정시 10,000개

- 검색창에 드롭다운되는 자동완성 키워드 목록의 갯수 지정 가능. 미지정시 10개

- 검색어 입력시 자동완성 키워드 목록에 동일한 문자가 있을 경우 하이라이트 표시

- 드롭다운되는 자동완성 키워드 목록의 z-index 값을 임의 지정 가능. 미지정시 0

- 수집된 검색어들은 로컬 저장소(localStorage)로 저장하며, 분 단위로 시간을 설정하고 해당 시간이 지나면 새로 추가된 문서로부터도 검색어를 추가 수집할 수 있음

 

 

0.1.5 업데이트 (2018-06-09)

 

- 서버 부하 이슈로 ajax 호출 시점을 페이지 로드가 아니라 검색창 focus 시점으로 변경. 캐시 적용

- 기타 소스 코드 정리

- 주의 : 앞으로는 애드온 설정을 바꿀 때마다 가급적 '캐시파일 재생성'을 해주세요. 사이트 이용자들의 로컬 저장소를 활용하는 만큼 "특히 검색대상을 태그에서 제목으로 또는 제목에서 태그로 바꾸는 경우" 로컬 저장소 보존 시간을 1분으로 조정하셨다가 1분 뒤 원하시는 시간을 재변경해주시면 좋습니다. 아니면 이용자들로 하여금 로컬 저장소 비우기를 유도해주시는 것도 방법입니다만, 브라우저마다 로컬 저장소 삭제 기능이 다를 수 있으므로 세심한 안내가 필요합니다.

 

 

0.1.4 업데이트 (2018-06-05)

 

- 구글 맞춤검색에서 드롭다운 메뉴의 left 값 수정

- 커스터마이징 사용자를 위해 드롭다운 메뉴의 위치와 넓이를 선택 가능하게 함 (기본값은 div에 맞춤)

- 키워드 배열 순서를 (1) 입력값과 동일한 자모음으로 시작하는 태그를 우선 배열 (2) 그 안에서는 가나다순으로 배열 (3) (시작부분이 아니라) 중간부분부터 동일한 자모음을 갖는 태그를 추가 배열 (4) 그 안에서는 가장 많은 count값을 가지는 태그를 우선 배열 (5) 나머지는 DB상의 등록된 순서에 따라 배열

 

 

0.1.3 업데이트 (2018-06-05)

 

- 애드온 실행 조건에서 strpos 조건을 삭제

- 구글 맞춤검색에서 드롭다운 메뉴를 인풋 필드에 맞춰서 출력

 

 

동작 설명

 

- 애드온 설정에서 옵션 체크

- 애드온 변수를 js 파일에 전달

- jQuery.ui가 로드되지 않은 게시판의 경우엔, 애드온에 포함된 로컬 js와 css 파일을 별도로 로드

- 브라우저가 '파이어폭스'일 경우, 한글 검색 문제 해결을 위한 keydown 이벤트 지연 설정

- js 파일에서 ajax를 이용, 별도의 php 파일과 xml 쿼리 파일로부터 서버의 자동완성 키워드 데이터를 json 형태로 호출

- 호출된 json 데이터는 {title : [~~~], tag : [~~~]}의 형식으로 설정

- 또한 데이터를 사용자의 브라우저 localStorage에 저장함으로써, 서버의 DB 쿼리 실행 빈도를 (최소화하고 싶지만ㅠ) 낮춤

- 애드온 설정에서 입력해둔 '로컬 저장 기한'이 지나면 localStorage의 데이터를 비우고, 페이지 로드 및 검색 옵션 선택을 할 때마다 다시 데이터를 축적

 

 

이 애드온을 사용하면 좋은 사이트


- (웹진을 비롯한 콘텐츠 제공 사이트, 아카이빙 사이트 등을 비롯하여) 각 게시물에 tag가 체계적으로 입력된 사이트

 

 

테스트 환경

 

- 크롬 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 웹호스팅

 

 

데모

 

- 기본 통합검색 * 라이믹스 * PHP 7.0

: https://bit.ly/2kKB8NE (들어가서 우측 상단 버튼을 누르면 통합검색창이 나옴)

- 구글 맞춤검색 * XE

: 웹지기님 사이트의 통합검색 참조 (알 만한 사람들은 아는 그곳)

 

제작자 윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
  • profile

    정말 @윤삼   님 도움을 많이 받습니다 . 좋은 자료 공유 감사드립니다 !~!!

  • profile
    감사합니다. 잘 사용하겠습니다. ^^
  • ?
    정말 유용하고 좋은 애드온 제공해주셔서 감사합니다 :)
    실례지만 js파일에서 jquery 스크립트 파일을 ajax로 요청해서 데이터를 동기식으로 받는 것 같은데요. 그런데 이게 다른 jquery 스크립트를 실행할 때 연쇄적인(?) 오류가 발생하는 경우가 있더라구요. 그래서ajax에서 async: false를 async:true로 바꾸고 success 부분에 ap_autocompleteIS.js 파일에서 ajax 함수 바깥에 있는 함수들을 success 안으로 집어넣으니까(?) 정상적으로 잘 작동하더군요. 혹시 다른 js파일과 충돌하면서 오류가 발생하시는 분들은 참고하셔도 좋을 것 같습니다.
  • ? profile
    GLANCEYES님, 혹시 가능하시다면 이 파일로 테스트 한번 해주실 수 있을까요?
    그전에는 ui 플러그인을 자동으로 로드하게 하려다보니 동기식으로 호출을 이용했는데, 이번에는 아예 운영자가 수동으로 불러오게 옵션을 줬어요.

    https://aporia.blog/?module=file&act=procFileDownload&file_srl=14885&sid=4f1474c2f57a3f3611cae4371b2cfa5c&module_srl=11567

    부탁드려봅니다~
  • profile ?
    아 네 감사합니다 :)
    죄송하지만 링크로 들어갔을 때 '사이트에 연결할 수 없음'이라면서 파일 다운로드가 되지 않는 것 같은데 다른 방법으로 받을 수 있도록 해주실 수 있을까요? 메일로 보내주셔도 되구요.
    [email protected]입니다.
  • ? profile
    아, 요즘 서버가;;;
    메일로 보내드렸어요. (zip 파일은 메일 보내기도 쉽지가 않네요ㅜ)
  • profile ?
    답변이 늦어서 죄송합니다.
    저희 사이트에서는 딱히 오류 없이 정상적으로 잘 출력이 되는 것 같습니다.
    도움이 되셨으면 좋겠습니다. 좋은 자료 제공해주셔서 감사드립니다.
  • ? profile
    조만간 더 보완해서 업데이트 버전도 올려야겠네요ㅎㅎ 확인 감사드려요.
  • profile
    윤삼님 일단 좋은 애드온 배포해주셔서 감사합니다. 그런데요.. 모바일에서는 아주 잘되는데, pc는 동작을 안하네요. https://aubade.co.kr/ 좌측 사이트에 구글 맞춤검색창 고정했습니다ㅠ
  • profile profile
    개발자도구로 보니까 글 제목 중에 function()~~~ 으로 시작하는 글이 있나봐요. 그 부분이 정규표현식에서 충돌을 일으키는 것 같습니다.
  • profile profile
    찾아서 삭제했습니다. 구글 검색창 단다고 생쇼하다 생긴 일이네요. 아직 작동하진 않지만요ㅠ
  • profile profile
    지연시간을 얼마로 주셨나요? 모바일보다 PC에서 로딩이 오래 걸린다면 PC에서는 애드온의 js 가 먼저 실행되고 구글검색창이 나중에 나와서 동작이 안될 수 있습니다.
    지금 시간보다 충분히 지연시간을 설정해 보세요.

    제가 보기엔 PC의 메인에서 구글검색창이 굉장히 늦게 나옵니다. 비동기 방식이라 사이트의 모든 것이 다 로딩 된 후 마지막에 구글검색창 같은게 나오는데 지금 제가 보기엔 6-7초도 더 걸리는 것 같습니다.
  • profile profile
    브라우저에서 쿠키 삭제 기능을 이용해서 localStorage를 비워보세요.
    그리고 z-index 값을 1 이상으로 줘보시구요.
  • profile profile
    구글 맞춤검색 드롭다운 맞춤 : div에 맞춤
    자동완성 드롭다운 z-index : 1
    으로 추천해봅니다~
  • profile profile
    됩니다!ㅋㅋ 감사해요.
  • profile profile
    감사합니다. 이제 되네요ㅠ
  • profile profile
    무엇 때문에 되는지 알려주셔야 개발자분이 다른분 문제 발생시 안내나 도움을 쉽게 드릴수 있지 않을까요?
  • profile profile
    네네. 웹지기님 말씀대처럼 지연시간을 대폭늘렸고, 개발자님 말씀대로 자동완성 드롭다운 z-index 1/ 그리고 충돌할수 있는 제목의 문서 삭제하/쿠키 삭제/ 캐시삭제[이건 제가 그냥 해본거라..] 그후 잘 작동됩니다!
  • profile profile
    신경써주셔서 감사합니다.
  • profile profile
    그럼 조언을 드린다면 지금 PC의 메인페이지가 서버 성능에 비해 너무 과하게 구성되어 있습니다. 이부분을 필수적인 것만 구성하고 나머지를 없애신 다음 로딩속도를 좀더 개선할 필요가 있습니다.

    모바일에서는 빠르게 자동완성 기능을 사용할 수도 있지만 지금 PC의 환경 때문에 어쩔 수 없이 지연시간을 굉장히 길게 줘야 합니다.

    모바일에서는 이 대시기시간 동안 자동완성 기능이 동작하지 않아요.
    개인적으로 봤을때 PC의 메인페이지 구성이 너무나 많은 양을 담고 있네요.
  • profile profile
    안그래도 정리를 해야한다 생각하긴 했는데 이번기회에 해야겠군요ㅋ 조언 감사합니다.
  • profile profile
    하나만 여쭐게요. 혹시 구글 검색창을 웹지기님 홈처럼 바로가기 아이콘으로 구성하고 다른 페이지에서 검색하게 하는것과, 메인에서 바로 검색하게 하는 것이 로딩 속도에 영항을 주나요?
  • profile profile
    뭐 컨텐츠가 로딩 된 후 구글검색이 불러와 지기 때문에 컨텐츠 로딩은 차이가 없습니다. 다만 구글검색창이 컨텐츠양이 많으면 한참 후에 보여지겠죠.

    저처럼 따로 별도페이지로 빼면 구글 검색창만 불러오게 때문에 빨리 불러올 수 있스을 수 있습니다.

    또는 구글검색창이 아닌 검색폼은 만드셔도 됩니다.

    지금 저희 검색전용 페이지의 검색창은 사실 구글검색이 아니고 그냥 제가 만든 창 입니다. 그래서 지연시간 조차 필요하지 않습니다.
  • profile profile
    또 이렇게 배워가네요ㅋ 맨날 훔쳐보고 있습니다.
  • ?
    와...
    구글 검색까지 자동완성이 되다니 대단합니다
    심지어 무료..! 윤삼님 존경합니다
  • ? profile
    그치만 태그 검색량이 많아진다든가 하면 자동완성 반응 속도가 썩 좋지만은 않을 거예요ㅜ 무료는 무료값을 하는 거죠ㅋㅋㅋ
  • profile profile
    제가 테스트를 해보니 사이트의 태그를 쿼리하는 시간은 문제가 되지 않아보이구요.
    클라이언트에서 얼마나 많은 수량을 가지고 자동완성을 하는냐에 따라 속도 차이가 생기더라구요.

    단말기성능,브라우저 성능에 따라서 이부분이 영향을 받는 것 같습니다. 서버의 성능이 아닌 제가 사용하는 노트북과 스마트폰에서 대략 5000개 정도로 설정해 놓고 사용하는게 성능면에서 적당하더라구요.

    이러한 것은 앞으로 기술의 발전에 따라 점차 사용 가능한 갯수는 더 높아질 수 있다는 생각도 들었습니다.
  • profile profile
    네, 로컬 저장소에 저장된 키워드 숫자에 따라서 색인하는 데 시간이 오래 걸리는 것 같더라구요. 결국 이 애드온은 기술적 한계로 인해ㅎ 단말기와 브라우저가 관건이에요ㅜㅜ
  • profile profile
    네. 이건 서버에서 처리해 줄 수 있는게 아니니 신경쓰실 일은 아닌거 같아요. 하드웨어와 브라우저 기술들은 하루가 다르게 발전하니까요.
  • profile
    오오오~~!!!!!!! >.<
    당장 설치하겠습니다!!!
    설치결과!!! 너~~ 무 잘돼요!!!
    잘 사용하겠습니다! 감사합니다 ^^
  • profile profile
    잘 된다니 다행입니다 :)
  • profile
    제 경우도 모바일에서는 구글 통합검색 입력창에 맞춰 잘 표시되는데요.
    PC에서는 화면 제일 좌측에 검색결과 드롭다운이 나타나네요. ^^
  • profile profile
    left 값 잡는 데 오류가 있는 모양입니다. 확인해보고 정정하도록 할게요~
  • profile profile
    간장게장님, 시간 되실 때 테스트해주시면 감사하겠습니다.

    ap_autocompleteIS.js 파일 129행 쯤에 있는
    'left': g_box.position().left, 를
    'left': g_box.offset().left, 로 바꿔도 같은 현상이 나타나나요?
  • profile profile
    0.1.4로 업데이트했습니다.
    드롭다운 위치가 여전히 말썽이라면 '구글 맞춤검색 드롭다운 맞춤'을 'input에 맞춤'으로 해주세요~
  • profile
    구글맞춤검색에서 동작이 안되는 듯 합니다.
    (strpos($output, 'name="is_keyword"') === false && strpos($output, 'gsc-input') === false)

    아마 이부분 추가 때문인 것으로 보입니다. 굳이 저부문을 리턴시킬 필요 없을 것 같다는 생각이 듭니다.
    어차피 필요한 모듈에 사용을 체크하고 사용하는 애드온이다보니 없어도 될 것 같구요.

    구글맞춤검색의 소스가 나타나는 시점이 한참 후 이기 때문에 저 코드로 인해 맞춤검색의 소스가 안보이는 시점에서 리턴이 될 듯 합니다.
  • profile profile
    구글맞춤검색 깔고 테스트할 땐 분명 됐었는데, 서버나 통신상태, 브라우저 등에 따라 안 집히기도 하는 모양이네요ㅜ
    해당 조건 삭제해서 0.1.3으로 업데이트했습니다.

    그리고 이번에 구글맞춤검색 인풋창 크기에 따라 드롭다운 메뉴 사이즈를 맞췄는데요. 웹지기님 사이트는 커스터마이징을 하신 거 같다라구요. js 파일은 따로 덮어쓰기 안 하시는 게 좋을 것 같습니다 :)
  • profile profile
    네. 이론상으로는 php가 동작되는 시점에 구글검색창이 나오지 않았기 때문에 안되는게 맞을 건데 php동작시점의 미묘한 차이로 되는 곳이 있는가 봅니다. 저희는 검색결과에 나오는 검색창은 구글꺼구요.
    처음 검색을 하는 시도하는 페이지는 구글께 아닌 저희 사이트 디자인이에요.

    새롭게 추가하신 기능은 살펴보겠습니다.
  • profile profile
    애드온 동작 시점을 before_display_content로 늦췄더니 우연찮게 얻어걸렸었나봐요. 역시 삭제하는 게 맞을 거 같아요 :)
  • profile profile
    인풋창 크기에 맞추는 것이 오히려 문제가 되네요. 저희는 그 기능 없이 하는게 정확한 위치에 정확한 넓이로 출력이 되는데 해당 기능은 검색입력창이 좌측에 있는 것으로 기준하는 것 같습니다.

    검색창의 위치가 조절되어 있는 경우 맞출 수가 없고 창의 넓이와 정확하게 매칭이 되지 않네요.
    오히려 이 기능을 쓰지 않으면 정확합니다. 이상하네요.

    말씀하신대 js 는 이전 것을 사용해야 할 것 같네요.
  • profile profile
    제가 테스트해본 거는 구글맞춤검색 순정으로 한 거여서요. 웹지기님이랑 차이가 생기는 거 같아요.

    순정의 경우엔 인풋창의 실제 넓이가 보이는 것보다 좁더라구요. 그래서 인풋을 감싸고 있는 상위의 div.gsc-input-box(모바일이라 클래스 이름은 틀렸을 수 있어요)에 맞추니까 알맞게 나오더라구요.

    웹지기님의 ssearch에서는 인풋에 padding이 들어가 있고 border가 있었던 걸로 기억합니다. 그리고 정확하진 않지만 div.gsc-input-box는 인풋보다 더 넓구요. 그러니까 드롭다운 메뉴를 인풋에 맞춰야 제대로 나오는 거 아닌가 싶습니다.
  • profile profile
    그쪽은 오히려 검색창 왼쪽에 아무것도 없어서 그런지 잘 맞는데 결과 페이지의 실제구글검색창이 나오는 곳에서는 틀어지네요.
    구글검색창 옆에 로고가 있는데 이런 부분의 위치가 무시 되는 갓 같기도 하고 그렇네요.
  • profile profile
    아 그렇던가요;; 이따 노트북 앞에 앉게 되면 다시 확인해봐야겠네요.
  • profile profile
    일단 저희는 해당 기능을 안써도 아주 보기 좋게 잘 나오니 옵션으로 처리해 주시면 저희 같은 경우 사용을 안하면 될 것 같아요. 코드가 조금 더 늘어나는 어려움이....
  • profile profile
    네 확인해보고 그렇게 조치하도록 할게요ㅎㅎ
  • profile profile
    웹지기님, 시간 되실 때 테스트해주시면 감사하겠습니다.

    ap_autocompleteIS.js 파일 129행 쯤에 있는
    'left': g_box.position().left, 를
    'left': g_box.offset().left, 로 바꿔도 같은 현상이 나타나나요?
  • profile profile
    방금 적용해 봤습니다.
    저희것 보시려면 ssearch 페이지를 보시면 안되요. 거긴 제가 만든 인풋이라 구글검색을 보시려면 검색결과 페이지에서 보셔야 합니다.

    이번에는 우측으로 이동해서 출력되네요.
  • profile profile
    그러네요. 끄아아아...
  • profile profile
    어라? <div class="gsc-input-box " id="gsc-iw-id1">에 얼추 맞은 거 같은데요?
  • profile profile
    거기 중앙 같아요.
  • profile profile
    (캡처해서 보여드리려 했는데, 여기는 파일을 올릴 수가 없네요ㅜ)
    그니까... 인풋창에는 안 맞지만, 인풋을 둘러싸고 있는 <div class="gsc-input-box " id="gsc-iw-id1">에 맞췄다는 말씀이에요.
    제가 알기로 순정은 input 태그에 border가 없고, div.gsc-input-box에 border가 들어가거든요.
    (근데 웹지기님은 div.gsc-input-box에 border를 빼고 input에 border를 넣으셔서 그동안 드롭다운 메뉴가 맞았던 거죠)
    암튼 이제 (순정 기준으로는) 드롭다운의 위치와 넓이를 캐치하는 데 성공한 것 같습니다ㅎㅎ

    원하신다면, 구글맞춤검색도 input에 맞춰 리스트 출력하는 옵션을 넣어볼까요?
  • profile profile
    일단 옵션은 있어야할 것 같구요.

    지금 말씀하신 구조로 css를 저희가 변경해 볼 수 있습니다.
    그리고 첫 검색 페이지에도 말씀하신 룰이 적용되도록 html 과 css 구조를 맞춰야 의도된 대로 동작할 것 같습니다.
  • profile profile
    그런데 제가 보기엔 div 박스랑 input 박스랑 위치가 차이가 없어보이는데요. 어차피 둘다 중간에 위치하는데요.
  • profile profile
    'left': g_box.offset().right,

    이렇게 하니 위치가 맞습니다. 이유는 잘 모르겠네요.
  • profile profile
    input과 input을 둘러싼 td에 좌우 padding이 있어서 div가 더 클 거예요.
    일단은 웹지기님처럼 스타일링을 위해 커스터마이징하신 분들이 있을 테니, 구글 맞춤검색이더라고 input에 맞춰 드롭다운 생성할 수 있는 옵션을 추가할게요!
  • profile profile
    아닙니다. 두가지 크기는 거의 비슷해요. 아래 댓글 달아드린대로 하니 위치가 얼추 맞아요.
  • profile profile
    오른쪽이 많이 삐져나오는 걸요.
    현재는 div에 맞춰 드롭다운 ul의 넓이와 위치(top, left)를 설정한 것이어서, left 값으로 offset().right를 놓으면 온전하게 일치하진 않을 거예요.
  • profile profile
    오른쪽이 살짝 나오는건 그건 맞추면 될것 같은데..
    'left': g_box.offset().left, 알려주신 이것으로 하면 완전히 벗어나요.


    무슨말인지 제가 잘 못알아듣나 봅니다. 알려주신대로 해 놓을게요.
  • profile profile
    그림으로 댓글 달았어요. https://xetown.com/rxe_file/988406#comment_990509 여기를 봐주세요 :)
  • profile profile
    0.1.4로 업데이트했습니다. 말씀하신대로 옵션 넣었구요.
    저 때문에 고생 많으셨습니다ㅜㅜ
  • profile profile
    아닙니다. 업데이트 감사합니다. 필요한 테스트는 충분히 해드릴게요!!
  • profile profile
    어... 옵션이 해당기능 사용 안함은 없나요???
  • profile profile
    스타일링이 안 된 순정 상태를 default로 생각한 거여서요. 원하시는대로 하려면 'input에 맞춤'으로 하시면 될 거예요~
  • profile profile
    네. 그럼 추천대로 해보고 문제가 생기면 피드백 드릴게요.
  • profile profile
    네, 도와주셔서 감사합니다~
  • profile profile
    업데이트 후 input에 맞춤으로 하니 지금 오래된 맥북에서도 괜찮네요. 감사합니다.
  • profile profile
    휴~ 확인 감사드려요!
  • ?
    멋지게 아주 좌아아알~됩니다^^ 감사합니다.
  • ? profile
    구글 맞춤검색에서 드롭다운 메뉴가 검색창 사이즈에 맞게 출력될 수 있도록 수정을 좀 했습니다! (0.1.3 버전)