통합검색 검색어 자동완성 애드온
| 자료 유형 | 애드온 |
|---|---|
| 간단한 소개 | 통합검색 검색창에서 키워드를 입력할 때 기존 '태그'를 참조하여 검색어를 자동완성 시켜주는 애드온 |
| 설치 경로 | ./addons/ap_autocompleteIS |
| 코어 지원 범위 | XE 1.x, Rhymix 1.9 |
| PHP 지원 범위 | 기타 |
| 자료 구분 | 공개 자료 |
| 라이선스 | GPL v2 |
| 파일명 | 버전 | 날짜 | 용량 | 다운 |
|---|---|---|---|---|
| ap_autocompleteIS.0.1.5.zip | 0.1.5 | 2018.06.09 | 11.2KB | 111 |
| ap_autocompleteIS.0.1.4.zip | 0.1.4 | 2018.06.05 | 10.7KB | 31 |
| ap_autocompleteIS.0.1.3.zip | 0.1.3 | 2018.06.05 | 10.5KB | 19 |
| ap_autocompleteIS.0.1.2.zip | 0.1.2 | 2018.06.04 | 10.5KB | 20 |
- '통합검색 검색어 자동완성 애드온'입니다.
- 통합검색 검색창에서 키워드를 입력할 때 기존 '태그'에 따라 검색어를 자동완성 시켜주는 애드온
- 웹지기님 도움으로! 구글 맞춤검색에도 적용 가능할 수 있게 짜봤습니다.
기본 기능
- 기본 통합검색 또는 구글 맞춤검색 중 하나를 선택하여 애드온 적용
- 구글 맞춤검색 선택시 자동완성 키워드 추출에 지연시간을 설정 (기본값 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
: 웹지기님 사이트의 통합검색 참조 (알 만한 사람들은 아는 그곳)
댓글 70
모바일에서는 빠르게 자동완성 기능을 사용할 수도 있지만 지금 PC의 환경 때문에 어쩔 수 없이 지연시간을 굉장히 길게 줘야 합니다.
모바일에서는 이 대시기시간 동안 자동완성 기능이 동작하지 않아요.
개인적으로 봤을때 PC의 메인페이지 구성이 너무나 많은 양을 담고 있네요.
저처럼 따로 별도페이지로 빼면 구글 검색창만 불러오게 때문에 빨리 불러올 수 있스을 수 있습니다.
또는 구글검색창이 아닌 검색폼은 만드셔도 됩니다.
지금 저희 검색전용 페이지의 검색창은 사실 구글검색이 아니고 그냥 제가 만든 창 입니다. 그래서 지연시간 조차 필요하지 않습니다.
그리고 z-index 값을 1 이상으로 줘보시구요.
자동완성 드롭다운 z-index : 1
으로 추천해봅니다~
실례지만 js파일에서 jquery 스크립트 파일을 ajax로 요청해서 데이터를 동기식으로 받는 것 같은데요. 그런데 이게 다른 jquery 스크립트를 실행할 때 연쇄적인(?) 오류가 발생하는 경우가 있더라구요. 그래서ajax에서 async: false를 async:true로 바꾸고 success 부분에 ap_autocompleteIS.js 파일에서 ajax 함수 바깥에 있는 함수들을 success 안으로 집어넣으니까(?) 정상적으로 잘 작동하더군요. 혹시 다른 js파일과 충돌하면서 오류가 발생하시는 분들은 참고하셔도 좋을 것 같습니다.
그전에는 ui 플러그인을 자동으로 로드하게 하려다보니 동기식으로 호출을 이용했는데, 이번에는 아예 운영자가 수동으로 불러오게 옵션을 줬어요.
https://aporia.blog/?module=file&act=procFileDownload&file_srl=14885&sid=4f1474c2f57a3f3611cae4371b2cfa5c&module_srl=11567
부탁드려봅니다~
죄송하지만 링크로 들어갔을 때 '사이트에 연결할 수 없음'이라면서 파일 다운로드가 되지 않는 것 같은데 다른 방법으로 받을 수 있도록 해주실 수 있을까요? 메일로 보내주셔도 되구요.
glanceyes@naver.com입니다.
메일로 보내드렸어요. (zip 파일은 메일 보내기도 쉽지가 않네요ㅜ)
저희 사이트에서는 딱히 오류 없이 정상적으로 잘 출력이 되는 것 같습니다.
도움이 되셨으면 좋겠습니다. 좋은 자료 제공해주셔서 감사드립니다.
정말 @윤삼 님 도움을 많이 받습니다 . 좋은 자료 공유 감사드립니다 !~!!