통합검색 검색어 자동완성 애드온 (테스트 버전, 2018-06-04)
게시판 검색어 자동완성 애드온에 이어 '통합검색 검색어 자동완성 애드온'입니다.
@웹지기님 요청으로 구글 맞춤검색에도 적용 가능할 수 있게 짜봤는데, 상상 속에서만 구현한 것일 뿐 구글 맞춤검색은 실제 테스트를 해보지 못했습니다;;;
아직 테스트 버전이므로, 가능하신 분 계시면 적용해보시고 코멘트 주시면 감사하겠습니다~
=> 정식 버전을 무료포인트마켓에 올렸습니다~ https://xetown.com/rxe_point/989428
0.1.1 업데이트 (2018-06-04)
- 웹지기님 테스트 결과에 맞춰 구글 맞춤검색 선택시 자동완성 키워드 추출에 지연시간을 설정 (기본값 2000 = 2초)
- 향후에는 애드온 호출시점을 before_display_content로 바꾸고, 정규표현식을 활용하여 로드된 페이지 소스에 통합검색 input 또는 구글검색 input이 없는 경우 return을 시키는 등, 애드온 동작을 최적화할 필요가 있겠음.
개요
통합검색 검색창에서 키워드를 입력할 때 기존 태그에 따라 검색어를 자동완성 시켜주는 애드온
기본 기능
- 기본 통합검색 또는 구글 맞춤검색 중 하나를 선택하여 애드온 적용
- 검색창의 자동완성 키워드를 '태그' 또는 '제목'으로부터 선택적으로 추출
- 자동완성 키워드를 수집할 모듈의 mid 직접 입력 가능. 미입력시 '기본 통합검색'은 통합검색 모듈(integration_search)에 지정되어 있는 모듈로부터, '구글 맞춤검색'은 사이트의 전체 모듈로부터 자동완성 키워드를 수집함
- 수집할 키워드의 최대 갯수 제한 가능. 미지정시 10,000개
- 검색창에 드롭다운되는 자동완성 키워드 목록의 갯수 지정 가능. 미지정시 10개
- 검색어 입력시 자동완성 키워드 목록에 동일한 문자가 있을 경우 하이라이트 표시
- 드롭다운되는 자동완성 키워드 목록의 z-index 값을 임의 지정 가능. 미지정시 0
- 수집된 검색어들은 로컬 저장소(localStorage)로 저장하며, 분 단위로 시간을 설정하고 해당 시간이 지나면 새로 추가된 문서로부터도 검색어를 추가 수집할 수 있음
동작 설명
- 애드온 설정에서 옵션 체크
- 애드온 변수를 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 웹호스팅
파일 다운로드
댓글 31
/ssearch
에 적용해 보았습니다.
통합검색 종류에는 "구글 맞춤검색" 라고 입력했습니다.
ap_autocompleteIS.js?20180603185451:148 Uncaught TypeError: Cannot read property 'autocomplete' of undefined
var keyword = $('input[name=results], input[name=search]');
results 는 저희가 더미로 만든 input 창 입니다. 구글검색에서는 search 가 사용되구요.
구글검색으로 넘어가기 전에 저희가 검색전용페이지에서 더미로 사용한 입력에 results 를 사용한 거니 이건 구글검색과는 관련이 없기도 합니다. 하지만 저희 사이트에서는 꼭 필요한 부분이긴 합니다.
result 로 만들어주신 것을 results 로 고쳤습니다.
어느정도 예상은 했는데 실제 검색 결과가 노출되는 페이지에서 노출되는 검색창은 구글것을 불러온 것이라 적용이 안되는 것 같네요.
애드온 js가 먼저 로딩되고 구글검색창이 이후에 로딩 될 것 같은데 이것과 관련이 잇을까요?
실제 사이트 로딩때 사이트의 html 에 작성된 것이 불러오는 것은 잘 되네요.
/ssearch 페이지에 검색창이 그런 곳 입니다.
setTimeout(function(){
},4000);
});
이렇게 지연시키니까 잘 됩니다.
네. 구글검색창으로 전환되면서 실제 입력창에 들어간 검색어를 다시 수정하는데 꽤 시간이 필요합니다.
그래서 4초 정도는 어차피 시간이 흘러갑니다.
지금 다만 delay가 적용되는 스크립트가 적용될 mid를 search mid로 한정하려고 하는데 mid 인식하게 코드가 필요하나 보네요.
if($mid=='search') {
Context::addJsFile('./addons/ap_autocompleteIS/js/ap_autocompleteIS_delay.js');
}
else
{
Context::addJsFile('./addons/ap_autocompleteIS/js/ap_autocompleteIS.js');
}
mid가 적용이 안되네요.
요렇게 하니 잘 되네요. 구글검색창이 아닌 곳에서는 딜레이 없이 구글검색창으로 전환된 곳에서는 딜레이를 줬습니다.
저희 사이트에서 한번 해보세요. 불편은 잘 모르겠습니다.
오, 과연 잘 되네요. 그럼 일러주신 방법 토대로 해서 버전업 해보도록 하겠습니다~!
저희는 모바일과 PC가 검색결과페이지를 서로 다른 mid를 사용해서 2개가 지정되었습니다.
좋은자료 감사합니다! 통합검색에서도 좋은 검색어 추천이 가능해졌습니다.
autoComplete(keyword, autocompleteIS_target);
이것 대신에요.
keyword.on('focus', function() {
autoComplete($(this), autocompleteIS_target);
});
으로요.
구글맞춤검색 입력폼이 이걸로도 안 잡힌다면 setTimeout을 쓰려구요.
네. 시도해 봤는데요. 구글맞춤검색창이 이 js 실행보다 늦게 나타나기 때문에 똑같이 적용이 안되는 것 같습니다.
- 구글 맞춤검색의 input 요소 확인은 $('input.gsc-input')으로 통일 했구요ㅎ
- mid별로 애드온 실행 지연시간을 달리 하는 건 로직이 안 떠올라서 반영을 못했습니다. 아마 사용자가 js 내에서 current_mid를 가지고 직접 커스터마이징해야 할 거 같아요.
@웹지기님 이걸로 봐주세요.
이 아래 그림이 left를 g_box.offset().left로 줬을 때 그림일 거예요.
두 번째 그림에서 보듯이 input창이 아니라 input을 감싸는 div에 맞췄기 때문에요. input창 넓이가 396px이죠.
그런데 세 번째 그림에서 div의 넓이는 412px이구요. 이게 드롭다운 메뉴의 left 위치와 width에 일치하는 걸 볼 수 있습니다.
스타일링 하신 걸 풀어서 원래대로 input의 border를 없애고, div에 border를 줘봤습니다. 원래 순정 상태에서는 이렇게 드롭다운과 맞아떨어지게 되는 거죠.
left를 g_box.offset().left
로 하면..
이런 출력을 보입니다. 그래서 말씀 드린거구요.
left를 g_box.offset().right 로 하면 시작점이 맞아요.
왜 중간에ㅠㅠㅠ
그치만 g_box.offset().right로 하면 시작점이 div가 아니라 input에 맞는 거예요;;;
그리고 g_box.offset().right 값이 아마 auto 이거나 undefiend일 거구요ㅜ (즉 아무값도 할당되지 않았을 거는 거죠)
이 아래가 제가 테스트했을 때 div에 맞춘 드롭다운 메뉴 모양이에요.
일단 저희는 모든 브라우저에서 폭에 너무 잘 맞게 나오기 때문에 오히려 이 기능이 필요하지 않으니 먼저 말씀 드린대로 옵션으로 사용안하게만 해주시면 앞으로 업데이트도 계속 이용할 수 있을 것 같습니다.
지금 해당 기능 없는 상태로 돌려 놓았습니다.
이 현상이 맥에서와 윈도우pc와 다른 현상일수 있을지도 모르겠습니다.
지금 확인하는 컴은 집에 아주 오래된 맥북의 오래된 크롬 입니다.(업데이트가 중단된..)
저희는 차라리 그냥 이 기능을 사용하지 않는게 모든 브라우저에게 정확한 넓이와 포지션에 풀다운이 나오는 듯 합니다.
지금 언급하신 측정하는 기준값의 차이에 따른 약간의 오차를 말씀 드리는게 아니에요.
https://xepushapp.com/board_vxJz62/69868