질문/조언팁/리소스 공유

게시판 검색어 자동완성 애드온에 이어 '통합검색 검색어 자동완성 애드온'입니다.

@웹지기님 요청으로 구글 맞춤검색에도 적용 가능할 수 있게 짜봤는데, 상상 속에서만 구현한 것일 뿐 구글 맞춤검색은 실제 테스트를 해보지 못했습니다;;;

아직 테스트 버전이므로, 가능하신 분 계시면 적용해보시고 코멘트 주시면 감사하겠습니다~

=> 정식 버전을 무료포인트마켓에 올렸습니다~ https://xetown.com/rxe_point/989428

 

 

0.1.1 업데이트 (2018-06-04)

 

ap_autocompleteIS.0.1.1.zip

- 웹지기님 테스트 결과에 맞춰 구글 맞춤검색 선택시 자동완성 키워드 추출에 지연시간을 설정 (기본값 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 웹호스팅

 

 

파일 다운로드

 

ap_autocompleteIS.0.1.1.zip

ap_autocompleteIS.0.1.0.zip

글쓴이 윤삼

profile
많이 아는 건 없고 조금 알아서 무서운 선무당입니다. 그래서 특기는 이따금 나오는 비의도적 헛다리 짚기ㅜ 페인팅은 결코 아닙니다.
  • profile

    /ssearch
    에 적용해 보았습니다.

    통합검색 종류에는 "구글 맞춤검색" 라고 입력했습니다.
     

    ap_autocompleteIS.js?20180603185451:148 Uncaught TypeError: Cannot read property 'autocomplete' of undefined

  • profile
    type이 text로 되어 있어서 seclect로 고쳤습니다.
  • profile
    그리고
    var keyword = $('input[name=results], input[name=search]');

    results 는 저희가 더미로 만든 input 창 입니다. 구글검색에서는 search 가 사용되구요.
    구글검색으로 넘어가기 전에 저희가 검색전용페이지에서 더미로 사용한 입력에 results 를 사용한 거니 이건 구글검색과는 관련이 없기도 합니다. 하지만 저희 사이트에서는 꼭 필요한 부분이긴 합니다.

    result 로 만들어주신 것을 results 로 고쳤습니다.
  • profile

    어느정도 예상은 했는데 실제 검색 결과가 노출되는 페이지에서 노출되는 검색창은 구글것을 불러온 것이라 적용이 안되는 것 같네요.

     

    애드온 js가 먼저 로딩되고 구글검색창이 이후에 로딩 될 것 같은데 이것과 관련이 잇을까요?

  • profile profile
    아, 실수도 많고ㅠㅠ 아무래도 구글맞춤검색을 저도 깔아보고 테스트를 해봐야겠어요.
  • profile profile
    구글검색창은 실제 저희 사이트의 html이 아닌 구글스크립트에 의해 불러온 input이에요. 아마 애드온 스크립트가 모든 것이 다 불러온 이후에 불러와져야 테스트가 가능할 것 같아요.
  • profile profile

    실제 사이트 로딩때 사이트의 html 에 작성된 것이 불러오는 것은 잘 되네요.
    /ssearch 페이지에 검색창이 그런 곳 입니다.

  • profile
    jQuery(document).ready(function($) {
    setTimeout(function(){



    },4000);
    });

    이렇게 지연시키니까 잘 됩니다.
  • profile profile
    4초면 꽤 긴 시간인데 불편함 같은 건 못 느끼셨나요?
  • profile profile

    네. 구글검색창으로 전환되면서 실제 입력창에 들어간 검색어를 다시 수정하는데 꽤 시간이 필요합니다.

    그래서 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가 적용이 안되네요.

  • profile profile
    Context::get('mid')=='search'

    요렇게 하니 잘 되네요. 구글검색창이 아닌 곳에서는 딜레이 없이 구글검색창으로 전환된 곳에서는 딜레이를 줬습니다.

    저희 사이트에서 한번 해보세요. 불편은 잘 모르겠습니다.
  • profile profile
    $mid 말고 $this->module_info->mid 로 해보세용
  • profile profile

    오, 과연 잘 되네요. 그럼 일러주신 방법 토대로 해서 버전업 해보도록 하겠습니다~!

  • profile profile
    만약 지연시간을 줄곳을 입력 받으실 것이라면 여러곳을 지정 가능하게 부탁드려요.
    저희는 모바일과 PC가 검색결과페이지를 서로 다른 mid를 사용해서 2개가 지정되었습니다.
    좋은자료 감사합니다! 통합검색에서도 좋은 검색어 추천이 가능해졌습니다.
  • profile profile
    혹시 시간되신다면, setTimeout 말고 이거 시험해주실 수 있으신지요.

    autoComplete(keyword, autocompleteIS_target);
    이것 대신에요.

    keyword.on('focus', function() {
    autoComplete($(this), autocompleteIS_target);
    });
    으로요.

    구글맞춤검색 입력폼이 이걸로도 안 잡힌다면 setTimeout을 쓰려구요.
  • profile profile

    네. 시도해 봤는데요. 구글맞춤검색창이 이 js 실행보다 늦게 나타나기 때문에 똑같이 적용이 안되는 것 같습니다.

  • profile
    @웹지기님, 새 버전 올렸습니다~
    - 구글 맞춤검색의 input 요소 확인은 $('input.gsc-input')으로 통일 했구요ㅎ
    - mid별로 애드온 실행 지연시간을 달리 하는 건 로직이 안 떠올라서 반영을 못했습니다. 아마 사용자가 js 내에서 current_mid를 가지고 직접 커스터마이징해야 할 거 같아요.
  • profile profile
    감사합니다. 확인해 보겠습니다.
  • profile profile
    잘되네요. 지연이 필요없는 곳은 애드온 php에서 mid 로 다른 js 를 불러오게 처리했습니다.
  • profile profile
    네, 확인 감사드려요~
  • profile

    @웹지기님 이걸로 봐주세요.

     

    이 아래 그림이 left를 g_box.offset().left로 줬을 때 그림일 거예요.

    0.png

     

    두 번째 그림에서 보듯이 input창이 아니라 input을 감싸는 div에 맞췄기 때문에요. input창 넓이가 396px이죠.

    1.png

     

    그런데 세 번째 그림에서 div의 넓이는 412px이구요. 이게 드롭다운 메뉴의 left 위치와 width에 일치하는 걸 볼 수 있습니다.

    2.png

     

    스타일링 하신 걸 풀어서 원래대로 input의 border를 없애고, div에 border를 줘봤습니다. 원래 순정 상태에서는 이렇게 드롭다운과 맞아떨어지게 되는 거죠.

    3.png

     

  • profile profile
    아니에요. input 박스의 중간에 풀다운 메뉴가 시작됩니다.
  • profile profile

    left를 g_box.offset().left 

    로 하면..

     

    cent.png

     

     

    이런 출력을 보입니다. 그래서 말씀 드린거구요.

     

    left를 g_box.offset().right 로 하면 시작점이 맞아요.

  • profile profile

    이 현상이 맥에서와 윈도우pc와 다른 현상일수 있을지도 모르겠습니다.
    지금 확인하는 컴은 집에 아주 오래된 맥북의 오래된 크롬 입니다.(업데이트가 중단된..)

    저희는 차라리 그냥 이 기능을 사용하지 않는게 모든 브라우저에게 정확한 넓이와 포지션에 풀다운이 나오는 듯 합니다.

     

    지금 언급하신 측정하는 기준값의 차이에 따른 약간의 오차를 말씀 드리는게 아니에요.

  • profile profile

    왜 중간에ㅠㅠㅠ

    그치만  g_box.offset().right로 하면 시작점이 div가 아니라 input에 맞는 거예요;;;

    그리고 g_box.offset().right 값이 아마 auto 이거나 undefiend일 거구요ㅜ (즉 아무값도 할당되지 않았을 거는 거죠)

    이 아래가 제가 테스트했을 때 div에 맞춘 드롭다운 메뉴 모양이에요.

     

    4.png

  • profile profile

    일단 저희는 모든 브라우저에서 폭에 너무 잘 맞게 나오기 때문에 오히려 이 기능이 필요하지 않으니 먼저 말씀 드린대로 옵션으로 사용안하게만 해주시면 앞으로 업데이트도 계속 이용할 수 있을 것 같습니다.

     

    지금 해당 기능 없는 상태로 돌려 놓았습니다.

  • profile profile
    네, 말씀하신대로 옵션을 넣는 쪽으로 할게요!
  • profile
    참고적으로 알려드려요.
    https://xepushapp.com/board_vxJz62/69868
  • profile profile
    어... 이건 너무 어려워요ㅠ 희대의 망작 필이네요ㅠㅠ
  • profile profile
    웹뷰 새창에서 안되는게 있어요. 이건 아마도 근본적인 해결을 푸시앱에서 해야할 사항일 거에요.
  • profile profile
    그럼 웹지기님만 믿고 마음 놓고 있겠습니다;;;;