Programmable Search Element Control API

프로그래밍 검색 엔진 구성요소 (검색창 및 검색결과 페이지)를 웹 페이지 및 기타 웹 애플리케이션을 쉽게 관리할 수 있습니다. 프로그래밍 검색 엔진 요소는 각 요소가 저장한 설정에 따라 렌더링되는 프로그래밍 검색 서버와 사용자가 직접 지정한 모든 맞춤설정까지 확인할 수 있습니다.

모든 자바스크립트는 비동기식으로 로드되어 브라우저가 프로그래밍 검색 엔진 자바스크립트를 가져오는 동안 계속 로드되도록 합니다.

소개

이 문서에서는 프로그래밍 검색 엔진을 추가하기 위한 기본 모델을 제공합니다. 요소의 설명을 비롯하여 웹페이지에 대한 구성 가능한 구성요소와 유연한 JavaScript API가 있습니다.

범위

이 문서에서는 프로그래밍 검색 엔진 제어 API

브라우저 호환성

프로그래밍 검색 엔진에서 지원하는 브라우저 목록은 여기에서 확인할 수 있습니다.

잠재고객

이 문서는 Google Programmable을 추가하려는 개발자를 대상으로 합니다. 검색 기능을 페이지에 추가했습니다.

프로그래밍 검색 요소

HTML 마크업을 사용하여 페이지에 프로그래밍 검색 요소를 추가할 수 있습니다. 각 요소는 하나 이상의 구성요소(검색창, 검색창, 또는 둘 다일 수 있습니다. 검색창에 다음 항목에 대한 사용자 입력이 허용됩니다. 있습니다.

  • 텍스트 입력란에 입력된 검색어
  • URL에 삽입된 쿼리 문자열
  • 프로그래매틱 실행

또한 검색결과 블록은 방법은 다음과 같습니다.

  • URL에 삽입된 쿼리 문자열
  • 프로그래매틱 실행

다음 유형의 프로그래밍 검색 요소를 사용할 수 있습니다.

요소 유형 구성요소 설명
표준 <div class="gcse-search"> 검색창과 검색 결과 동일한 <div>에 표시됩니다.
2열 <div class="gcse-searchbox"><div class="gcse-searchresults"> 한쪽에 검색 결과가 있고 검색창이 있는 2열 레이아웃 있습니다. 2열 모드에 여러 요소를 삽입하려는 경우 gname 속성을 사용하여 검색결과 블록이 있는 검색창
검색창만 <div class="gcse-searchbox-only"> 독립형 검색창
searchresults-only <div class="gcse-searchresults-only"> 검색결과의 독립형 블록입니다.

웹페이지에 유효한 검색 요소를 원하는 만큼 추가할 수 있습니다. 2열용 모든 필수 구성요소 (검색창 및 검색창)를 결과 블록)가 있어야 합니다.

다음은 간단한 검색 요소의 예입니다.

<!-- Put the following javascript before the closing </head> tag
and replace 123456 with your own Programmable Search Engine ID. -->
<script async src="https://cse.google.com/cse.js?cx=123456"></script>

<!-- Place this tag where you want both of the search box and the search results to render -->
<div class="gcse-search"></div>

프로그래밍 검색 요소를 사용하여 다양한 레이아웃 옵션 작성

다음 레이아웃 옵션은 프로그래밍 검색 엔진 제어판의 디자인과 분위기 페이지에서 사용할 수 있습니다. 다음은 프로그래밍 검색 요소를 사용하여 레이아웃 옵션을 구성하는 방법에 관한 일반적인 가이드라인입니다. 이러한 옵션의 데모를 보려면 링크를 클릭하세요.

옵션 구성요소
전체 너비 <div class="gcse-search">
좁게 <div class="gcse-search">
2열 <div class="gcse-searchbox">, <div class="gcse-searchresults">
2페이지 <ph type="x-smartling-placeholder"> 첫 번째 페이지에는 <div class="gcse-searchbox-only">, 두 번째 페이지에는 <div class="gcse-searchresults-only"> (또는 기타 구성요소)
결과만 <ph type="x-smartling-placeholder"> <div class="gcse-searchresults-only">
Google 호스팅 <ph type="x-smartling-placeholder"> <div class="gcse-searchbox-only">

레이아웃 옵션에 대해 자세히 알아보기

프로그래밍 검색 요소 맞춤설정

색상, 글꼴 또는 링크 스타일을 맞춤설정하려면 프로그래밍 검색 엔진의 디자인 페이지로 이동하세요.

선택적 속성을 사용하여 프로그래밍 검색 엔진 제어판을 엽니다. 이를 통해 페이지별 검색 환경을 만들 수 있습니다. 예를 들어 다음 코드는 결과 페이지를 여는 검색창을 생성합니다. (http://www.example.com?search=lady+gaga)를 새 창에서 엽니다. 이 queryParameterName 속성은 사용자 쿼리 문자열과 함께 URL을 생성합니다.

queryParameterName 속성에는 data-가 접두사로 붙습니다. 이 프리픽스는 모든 속성에 필수입니다.

<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">

프로그래밍 검색 엔진 제어판을 사용하여 자동 완성 또는 상세검색에 사용되는 경우 속성을 사용하여 기능을 맞춤설정할 수 있습니다. 이러한 속성을 사용하여 지정하는 모든 맞춤설정 제어판의 설정을 재정의합니다. 다음 예시에서는 다음과 같은 특성을 포함하는 2열 검색 요소

  • 기록 관리가 사용 설정됨
  • 표시되는 자동 완성의 최대 개수는 5개로 설정되어 있습니다.
  • 상세검색은 링크로 표시됩니다.

<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5">
<div class="gcse-searchresults" data-refinementStyle="link">

지원되는 속성

속성 유형 설명 구성요소
일반
gname 문자열 (선택사항) 검색 요소 객체의 이름입니다. 이름은 연결된 구성요소를 이름으로 설정하거나 searchbox searchresults 구성요소로 분할합니다. 지정하지 않으면 프로그래밍 검색 엔진은 웹 사이트의 gname 구성 요소 순서를 제어합니다. 예를 들어 이름이 지정되지 않은 첫 번째 searchbox-onlygname 'searchbox-only0'이 있음 두 번째에는 gname 'seachbox-only1'이 있는 식입니다. 구성요소를 위해 자동으로 생성된 gname는 2열 레이아웃이 two-column가 됩니다. 다음 예를 참고하세요. gname storesearch을 사용하여 searchbox를 연결합니다. searchresults 구성요소가 포함된 구성요소를 살펴보겠습니다.
<div class="gcse-searchbox" data-gname="storesearch"></div>
<div class="gcse-searchresults" data-gname="storesearch"></div>

객체를 검색할 때 둘 이상의 구성요소에 동일한 gname님, 프로그래밍 검색 엔진이 있습니다.

모두
autoSearchOnLoad 불리언 URL에 포함된 검색어로 검색을 실행할지 여부를 지정합니다. 확인할 수 있습니다 검색어 문자열은 URL에 있어야 하고 자동 검색을 실행합니다. 기본값: true 모두
enableHistory 불리언 true인 경우 브라우저의 기록 관리를 사용 설정합니다. '뒤로' 전달할 수 있습니다. 데모 보기

검색창

검색창만

queryParameterName 문자열 쿼리 매개변수 이름. 예: q (기본값) 또는 query. URL에 삽입됩니다 (예: http://www.example.com?q=lady+gaga)를 입력합니다. 참고: 검색어 매개변수 이름만으로는 로드 시 자동 검색이 트리거되지 않습니다. 쿼리 문자열이 있어야 자동 검색을 실행할 수 있습니다. 모두
resultsUrl URL 결과 페이지의 URL입니다. 기본값은 Google에서 호스팅하는 페이지입니다. 검색창만
newWindow 불리언 결과 페이지를 새 창에서 열지 지정합니다. 기본값: false 검색창만
ivt 불리언

이 매개변수를 사용하면 무효 트래픽 전용 쿠키를 사용하는 광고 및 로컬 스토리지에 저장된 사용자 동의가 이루어지지 않은 트래픽을 추적할 수 있습니다

true 이 매개변수가 없거나 'true'로 설정하면 인코더-디코더 아키텍처를 무효 트래픽 전용 쿠키를 사용하고 동의를 얻은 트래픽에 대해서만 로컬 스토리지를 사용합니다.

false 이 매개변수를 'false'로 설정하는 경우 유효하지 않은 값을 트래픽 전용 쿠키를 사용하며, 동의한 트래픽과 동의하지 않은 트래픽 모두에 로컬 스토리지를 사용합니다.

기본값: false

사용 예시는 <div class="gcse-search" data-ivt="true"></div>입니다.

검색 결과

searchresults-only

mobileLayout 문자열

휴대기기에 모바일 레이아웃 스타일을 사용해야 하는지 여부를 지정합니다.

enabled 휴대기기에만 모바일 레이아웃을 사용합니다.

disabled 모든 기기에서 모바일 레이아웃을 사용하지 않습니다.

forced 모든 기기에 모바일 레이아웃을 사용합니다.

기본값: enabled

사용 예시는 <div class="gcse-search" data-mobileLayout="disabled"></div>입니다.

모두
자동 완성
enableAutoComplete 불리언 프로그래밍 검색 엔진 제어판에서 자동 완성을 사용하도록 설정한 경우에만 사용할 수 있습니다. true는 자동 완성을 사용 설정합니다. 모두
autoCompleteMaxCompletions 정수 표시할 자동 완성의 최대 개수입니다.

검색창

검색창만

autoCompleteMaxPromotions 정수 자동 완성에 표시할 최대 프로모션 수입니다.

검색창

검색창만

autoCompleteValidLanguages 문자열 자동 완성이 필요한 언어를 쉼표로 구분한 목록입니다. 사용 설정되어 있습니다. <ph type="x-smartling-placeholder"></ph> 지원되는 언어

검색창

검색창만

상세검색
defaultToRefinement 문자열 프로그래밍 검색 엔진 제어판 기본 상세검색 라벨을 지정합니다. display.참고: 이 속성은 Google 호스팅 레이아웃에서 지원되지 않습니다. 모두
refinementStyle 문자열 허용되는 값은 tab (기본값) 및 link입니다. link는 이미지 검색이 사용 중지된 경우에만 지원됩니다. 이미지 검색은 사용하고 웹 검색은 사용하지 않도록 설정되어 있습니다.

검색 결과

searchresults-only

이미지 검색
enableImageSearch 불리언 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

true이면 이미지 검색을 사용 설정합니다. 이미지 검색결과가 별도의 탭으로 이동해야 합니다.

검색 결과

searchresults-only

defaultToImageSearch 불리언 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

true인 경우 검색결과 페이지에 이미지 검색결과가 표시됩니다. 기본적으로 제공됩니다 웹 검색 결과는 별도의 탭에서 확인할 수 있습니다.

모두
imageSearchLayout 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

이미지 검색결과 페이지의 레이아웃을 지정합니다. 사용 가능한 값 classic, column 또는 popup입니다.

검색 결과

searchresults-only

imageSearchResultSetSize 정수, 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

이미지 검색을 위한 검색결과 집합의 최대 크기를 지정합니다. 예: large, small, filtered_cse, 10

모두
image_as_filetype 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

지정된 확장자의 파일로 결과를 제한합니다.

지원되는 확장 프로그램은 jpg, gif, png, bmp, svg, webp, ico, raw입니다.

모두

image_as_oq 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

논리적 OR을 사용하여 검색 결과를 필터링합니다.

'term1'을 포함하는 검색결과를 원하는 경우의 예 또는 "term2":<div class="gcse-search" data-image_as_oq="term1 term2"></div>

모두

image_as_rights 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

라이선스를 기반으로 합니다.

지원되는 값은 cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived 및 이들의 조합입니다.

일반적인 조합에 대해 알아보기

모두

image_as_sitesearch 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

검색결과를 특정 사이트의 페이지로 제한합니다.

사용 예시는 <div class="gcse-search" data-image_as_sitesearch="example.com"></div>입니다.

모두

image_colortype 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

흑백 (모노), 그레이 스케일 또는 컬러 이미지로 검색을 제한합니다. 지원되는 값은 mono, gray, color입니다.

모두

image_cr 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

출처가 특정 국가의 문서로 검색결과를 제한합니다.

지원 값

모두

image_dominantcolor 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

특정 주요 색상의 이미지로 검색을 제한합니다. 지원되는 값은 red, orange, yellow, green, teal, blue, purple, pink, white, gray, black, brown입니다.

모두

image_filter 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

검색결과 자동 필터링.

지원되는 값: 0/1

사용 예시는 <div class="gcse-search" data-image_filter="0"></div>입니다.

모두

image_gl 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다. 출처 국가가 매개변수 값과 일치하는 검색결과를 우선적으로 표시합니다.

지원 값

모두

image_size 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

지정된 크기의 이미지를 반환합니다. 여기서 크기는 icon, small, medium, large, xlarge, xxlarge, huge. 중 하나일 수 있습니다.

모두

image_sort_by 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

날짜 또는 다른 구조화된 콘텐츠를 사용하여 결과를 정렬합니다.

관련성을 기준으로 정렬하려면 빈 문자열 (image_sort_by="")을 사용합니다.

사용 예시는 <div class="gcse-search" data-image_sort_by="date"></div>입니다.

모두

image_type 문자열 인 경우에만 사용 가능 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

특정 유형의 이미지로 검색을 제한합니다. 지원되는 값은 clipart (클립아트), face (인물의 얼굴), lineart (선화), stock (스톡 사진), photo (사진), animated (애니메이션 GIF)입니다.

모두

웹 검색
disableWebSearch 불리언 true인 경우 웹 검색을 사용 중지합니다. 일반적으로 <ph type="x-smartling-placeholder"></ph> 프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.

검색 결과

searchresults-only

webSearchQueryAddition 문자열 논리 OR을 사용하여 검색어에 추가된 용어입니다.

사용 예시는 <div class="gcse-search" data-webSearchQueryAddition="term1 term2"></div>입니다.

모두
webSearchResultSetSize 정수, 문자열 결과 집합의 최대 크기입니다. 적용 대상 이미지 검색과 웹 검색 모두 기본값은 레이아웃과 프로그래밍 검색 엔진이 전체 웹을 검색하도록 구성되어 있는지 사이트 사용 가능한 값은 다음과 같습니다. <ph type="x-smartling-placeholder">
    </ph>
  • 1~20 사이의 정수
  • small: 작은 결과 세트(일반적으로 결과 4개)를 요청합니다. 페이지당
  • large: 큰 결과 세트(일반적으로 8개)를 요청합니다. 페이지당 결과 수.
  • filtered_cse: 최대 10페이지 또는 100개의 결과만 포함할 수 있습니다.
모두
webSearchSafesearch 문자열 지정 조건 SafeSearch가 웹 검색 결과에 사용하도록 설정되어 있습니다. 허용되는 값은 offactive입니다. 모두
as_filetype 문자열 지정된 확장자의 파일로 결과를 제한합니다. Google에서 색인을 생성할 수 있는 파일 형식 목록은 Search Console 고객센터에서 확인할 수 있습니다.

모두

as_oq 문자열 논리적 OR을 사용하여 검색 결과를 필터링합니다.

'term1'을 포함하는 검색결과를 원하는 경우의 예 또는 "term2":<div class="gcse-search" data-as_oq="term1 term2"></div>

모두
as_rights 문자열 라이선스를 기반으로 합니다.

지원되는 값은 cc_publicdomain, cc_attribute, cc_sharealike, cc_noncommercial, cc_nonderived 및 이들의 조합입니다.

일반적인 조합은 https://wiki.creativecommons.org/wiki/CC_Search_integration을 참조하세요.

모두

as_sitesearch 문자열 검색결과를 특정 사이트의 페이지로 제한합니다.

사용 예시는 <div class="gcse-search" data-as_sitesearch="example.com"></div>입니다.

모두
cr 문자열 출처가 특정 국가의 문서로 검색결과를 제한합니다.

지원 값

사용 예시는 <div class="gcse-search" data-cr="countryFR"></div>입니다.

모두
filter 문자열 검색결과 자동 필터링.

지원되는 값: 0/1

사용 예시는 <div class="gcse-search" data-filter="0"></div>입니다.

모두
gl 문자열 출처 국가가 매개변수 값과 일치하는 검색결과를 우선적으로 표시합니다.

이 속성은 언어 값 설정과 함께 사용해야 합니다.

지원 값

사용 예시는 <div class="gcse-search" data-gl="fr"></div>입니다.

모두
lr 문자열 특정 언어로 작성된 문서로 검색결과를 제한합니다.

지원 값

사용 예시는 <div class="gcse-search" data-lr="lang_fr"></div>입니다.

모두
sort_by 문자열 날짜 또는 다른 구조화된 콘텐츠를 사용하여 결과를 정렬합니다. 속성 값은 프로그래밍 검색 에나인의 결과 정렬 설정에 제공된 옵션 중 하나여야 합니다.

관련성을 기준으로 정렬하려면 빈 문자열 (sort_by="")을 사용합니다.

사용 예시는 <div class="gcse-search" data-sort_by="date"></div>입니다.

모두
검색 결과
enableOrderBy 불리언 관련성, 날짜 또는 라벨별로 결과를 정렬할 수 있습니다. 모두
linkTarget 문자열 링크 대상을 설정합니다. 기본값: _blank

검색 결과

searchresults-only

noResultsString 문자열 쿼리와 일치하는 결과가 없을 때 표시할 기본 텍스트를 지정합니다. 기본 결과 문자열은 모든 언어에서 현지화된 문자열을 표시하는 데 맞춤설정된 번역은 그렇지 않습니다.

검색 결과

searchresults-only

resultSetSize 정수, 문자열 결과 집합의 최대 크기입니다. 예를 들면 large입니다. small, filtered_cse, 10 이 레이아웃 및 엔진이 검색을 지원하도록 구성되어 있는지 여부에 따라 전체 웹 또는 특정 사이트만 타겟팅하도록 설정할 수 있습니다. 모두
safeSearch 문자열 다음과 같이 지정합니다. 세이프서치는 웹 검색과 이미지 검색 모두에 사용됩니다. 허용되는 값은 off입니다. 및 active 모두

콜백

<ph type="x-smartling-placeholder">
</ph>
콜백 시퀀스 다이어그램
검색 요소 JavaScript 콜백의 시퀀스 다이어그램

콜백은 검색 요소 초기화 및 검색 프로세스의 세부적인 제어를 지원합니다. 이는 전역 __gcse를 통해 검색 요소 JavaScript에 등록됩니다. 객체를 지정합니다. 콜백 등록은 모든 콜백이 등록되고 지원되는 콜백을 사용합니다.

<ph type="x-smartling-placeholder">
</ph>
콜백 등록

  window.__gcse = {
    parsetags: 'explicit', // Defaults to 'onload'
    initializationCallback: myInitializationCallback,
    searchCallbacks: {
      image: {
        starting: myImageSearchStartingCallback,
        ready: myImageResultsReadyCallback,
        rendered: myImageResultsRenderedCallback,
      },
      web: {
        starting: myWebSearchStartingCallback,
        ready: myWebResultsReadyCallback,
        rendered: myWebResultsRenderedCallback,
      },
    },
  };
  

초기화 콜백

초기화 콜백은 요소 검색 JavaScript가 검색을 렌더링하기 전에 호출됩니다. 요소에 구성됩니다. parsetagsexplicit로 설정된 경우 __gcse이면 검색 요소 JavaScript는 렌더링 검색 요소를 초기화 콜백 (콜백 등록 참조) 렌더링할 요소를 선택하거나 렌더링될 때까지 렌더링을 지연하는 데 사용할 수 있습니다. 할 수 있습니다 요소의 속성을 재정의할 수도 있습니다. 예를 들어 제어판 또는 HTML 속성을 통해 웹으로 기본 설정되는 검색창 이미지 검색창으로 검색하거나 프로그래밍 검색 엔진 양식을 통해 제출된 검색어가 검색 결과 전용 요소에서 실행됩니다. <ph type="x-smartling-placeholder"></ph> 데모 보기

초기화 콜백의 역할은 parsetags 값으로 제어됩니다. __gcse의 속성입니다.

  • 값이 onload인 경우 검색 요소 JavaScript는 페이지의 모든 검색 요소를 자동으로 렌더링합니다. 초기화 콜백은 호출되지만 검색 요소 렌더링을 담당하지는 않습니다.
  • 값이 explicit인 경우 검색 요소 JavaScript가 렌더링되지 않습니다. 검색 요소 콜백은 render() 함수 또는 go() 함수로 모든 검색 요소를 렌더링합니다.

다음 코드는 explicit parsetag 및 초기화 콜백을 사용하는 div:

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> 초기화 콜백 예시

ID 값이 있는 <div>를 포함해야 합니다. 에서 검색 요소 코드를 삽입합니다.

    <div id="test"></div>
<div> 뒤에 이 JavaScript를 추가합니다. 참고로 참조는 test, id Google은 <div>
const myInitCallback = function() {
  if (document.readyState == 'complete') {
    // Document is ready when Search Element is initialized.
    // Render an element with both search box and search results in div with id 'test'.
    google.search.cse.element.render(
        {
          div: "test",
          tag: 'search'
         });
  } else {
    // Document is not ready yet, when Search Element is initialized.
    google.setOnLoadCallback(function() {
       // Render an element with both search box and search results in div with id 'test'.
        google.search.cse.element.render(
            {
              div: "test",
              tag: 'search'
            });
    }, true);
  }
};

// Insert it before the Search Element code snippet so the global properties like parsetags and callback
// are available when cse.js runs.
window.__gcse = {
  parsetags: 'explicit',
  initializationCallback: myInitCallback
};

검색 요소 로드를 시작하려면 이 HTML을 포함하세요. 다음에서 cx 값을 바꿉니다. 자체 cxsrc 절을 함께 사용합니다.

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

콜백 검색

검색 요소 JavaScript는 검색 제어 흐름을 확인할 수 있습니다 검색 콜백은 웹 검색 콜백과 일치하는 이미지 검색 콜백으로 쌍으로 제공됩니다.

  • 검색 시작 중 <ph type="x-smartling-placeholder">
      </ph>
    • 이미지 검색
    • 웹 검색의 경우
  • 결과 준비됨 <ph type="x-smartling-placeholder">
      </ph>
    • 이미지 검색
    • 웹 검색의 경우
  • 렌더링된 결과 <ph type="x-smartling-placeholder">
      </ph>
    • 이미지 검색
    • 웹 검색의 경우

초기화 콜백과 마찬가지로 검색 콜백은 __gcse 객체의 항목을 사용하여 구성됩니다. 이는 검색 요소가 자바스크립트가 시작됩니다. 시작 후 __gcse의 수정사항은 무시됩니다.

이러한 각 콜백은 다음과 같이 gName를 전달합니다. 검색 요소를 인수로 사용합니다. gname는 페이지에 검색어가 둘 이상 포함되어 있을 때 유용합니다. 검색어 입력 data-gname 속성을 사용하여 gname 값을 요소에 추가합니다.

<div class="gcse-searchbox" data-gname="storesearch"></div>

HTML이 gname을 식별하지 못하는 경우 검색 요소 JavaScript는 HTML이 수정될 때까지 일관성을 유지합니다.

이미지/웹 검색 시작 콜백

검색 시작 콜백은 검색 요소 JavaScript 요청 직전에 호출됩니다. 검색할 수 있습니다. 예를 들면 현지 시간을 사용하여 변경할 수 있습니다.

searchStartingCallback(gname, query)
gname
검색 요소의 식별 문자열
query
사용자가 입력한 값 (검색으로 수정되었을 수 있음) 요소 JavaScript를 사용하여 구현됩니다.)

이 콜백은 이 검색에 대한 쿼리로 사용되어야 하는 값을 반환합니다. 만약 비어 있으면 반환 값이 무시되고 호출자가 수정되지 않은 쿼리를 사용합니다.

또는 __gcse 객체에 콜백 함수를 배치할 수 있습니다. JavaScript를 사용하여 객체에 콜백을 동적으로 추가합니다.

window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
검색 시작 콜백 예

다음은 검색 시작 콜백 예morning 중 하나를 추가합니다. 또는 afternoon을 쿼리에 추가합니다.

<ph type="x-smartling-placeholder">
</ph> 검색 시작 콜백 예
    const myWebSearchStartingCallback = (gname, query) => {
      const hour = new Date().getHours();
      return query + (hour < 12 ? ' morning' : ' afternoon');
    };
    window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;

window.__gcse:에 이 콜백을 설치합니다.

  window.__gcse || (window.__gcse = {});
    window.__gcse.searchCallbacks = {
      image: {
        starting: 'myImageSearchStartingCallbackName',
      },
      web: {
        starting: myWebSearchStartingCallback,
      },
    };
  
  <script
  async src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

이미지/웹 검색결과 준비 콜백

이러한 콜백은 검색 요소 JavaScript가 프로모션을 렌더링하고 있습니다. 예를 들어 프로모션을 렌더링하고 일반 맞춤설정으로 지정할 수 없습니다.

resultsReadyCallback(gname, query, promos, results, div)
gname
검색 요소의 식별 문자열
query
이 결과를 생성한 검색어
promos
프로모션 객체의 배열로, 일치하는 항목에 대응됩니다. 프로모션을 생성합니다. 프로모션 객체 정의를 참조하세요.
results
결과 객체의 배열입니다. 자세한 내용은 result 객체 정의를 참조하세요.
div
일반적으로 검색 요소가 작동하는 DOM에 배치된 HTML div 프로모션 및 검색 결과 등이 있습니다. 일반적으로 검색 요소 JavaScript는 이 div를 채우지만 이 콜백이 결과의 자동 렌더링을 중지하도록 선택할 수 있습니다. 이 div를 사용하여 결과 자체를 렌더링합니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

이 콜백이 true 값을 반환하면 검색 요소 JavaScript는 페이지-바닥글 작업에만 적용됩니다.

결과 준비 콜백 예시

resultsReady 콜백 예시는 다음과 같습니다. 예시 결과 준비 콜백은 기본 프레젠테이션을 재정의합니다. 아주 쉽게 대체할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> 결과 준비 콜백 예시
    const myResultsReadyCallback = function(name, q, promos, results, resultsDiv) {
      const makePromoElt = (promo) => {
        const anchor = document.createElement('a');
        anchor.href = promo['url'];
        anchor.target = '_blank';
        anchor.classList.add('gs-title');
        const span = document.createElement('span');
        span.innerHTML = 'Promo: ' + promo['title'];
        anchor.appendChild(span);
        return anchor;
      };
      const makeResultParts = (result) => {
        const anchor = document.createElement('a');
        anchor.href = result['url'];
        anchor.target = '_blank';
        anchor.classList.add('gs_title');
        anchor.appendChild(document.createTextNode(result['visibleUrl']));
        const span = document.createElement('span');
        span.innerHTML = ' ' + result['title'];
        return [anchor, span];
      };

      const table = document.createElement('table');
      if (promos) {
        for (const promo of promos) {
          const row = table.insertRow(-1);
          const cell = row.insertCell(-1);
          cell.appendChild(makePromoElt(promo));
        }
        resultsDiv.appendChild(table);
        resultsDiv.appendChild(document.createElement('br'));
      }
      if (results) {
        const table = document.createElement('table');
        for (const result of results) {
          const row = table.insertRow(-1);
          const cell = row.insertCell(-1);
          const [anchor, span] = makeResultParts(result);
          cell.appendChild(anchor);
          const cell2 = row.insertCell(-1);
          cell2.appendChild(span);
        }
        resultsDiv.appendChild(table);
      }
      return true;
    };

window.__gcse:에 이 콜백을 설치합니다.

  window.__gcse || (window.__gcse = {});
    window.__gcse.searchCallbacks = {
      web: {
        ready: myResultsReadyCallback,
      },
    };
  <script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

검색 시작 콜백과 마찬가지로 위의 방법은 콜백을 __gcse 객체.

이미지/웹 검색결과 렌더링 콜백

이러한 콜백은 검색 요소 JavaScript가 페이지를 렌더링하기 직전에 호출됩니다. 바닥글 사용 사례의 예에는 검색이 요소가 표시되지 않는 경우(예: 이 항목 저장 체크박스 또는 자동으로 렌더링되거나 자세한 정보 버튼을 추가하는 콜백 등이 있습니다.

결과 렌더링된 콜백promosresults 결과 준비 콜백의 매개변수를 재정의하면 다음과 같이 두 매개변수 간에 전달할 수 있습니다.

callback(gname, query, promoElts, resultElts);
gname
검색 요소의 식별 문자열
query
검색 문자열입니다.
promoElts
프로모션이 포함된 DOM 요소의 배열입니다.
resultElts
결과를 포함하는 DOM 요소의 배열입니다.

반환 값은 없습니다.

결과 렌더링 콜백 예시

resultsRendered 콜백 예시는 다음과 같습니다. 예시 결과 렌더링된 콜백은 더미 Keep을 추가합니다. 체크박스를 선택합니다.

<ph type="x-smartling-placeholder">
</ph> 렌더링된 콜백 결과 예
myWebResultsRenderedCallback = function(name, q, promos, results) {
    for (const div of promos.concat(results)) {
      const innerDiv = document.createElement('div');
      innerDiv.appendChild(document.createTextNode('Keep: '));
      const checkBox = document.createElement('input');
      checkBox.type = 'checkbox';
      checkBox.name = 'save';
      innerDiv.appendChild(checkBox);
      div.insertAdjacentElement('afterbegin', innerDiv);
    }
  };

window.__gcse:에 이 콜백을 설치합니다.

window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    rendered: 'myWebResultsRenderedCallback',
  },
};
  <script async
    src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

결과 렌더링 콜백이 필요한 경우 결과 준비 콜백에 전달된 정보는 해당 데이터를 있습니다. 다음 예는 결과 준비 콜백에서 렌더링된 결과로의 richSnippet 있습니다.

를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> <ph type="x-smartling-placeholder"></ph> 결과 렌더링 콜백과 협력하는 결과 준비 콜백의 예
const makeTwoPartCallback = () => {
  let saveForRenderCallback;
  const readyCallback = (name, q, promos, results, resultsDiv) =>
  {
    saveForRenderCallback = [];
    for (const result of results) {
      const {
        richSnippet: {
          answer = []
        } = {},
      } = result;
      const firstAnswer = answer[0];
      if (firstAnswer) {
        const upVotes = firstAnswer['upvotecount'];
        if (upVotes) {
          saveForRenderCallback.push(
            {upvotes: parseInt(upVotes, 10)}
          );
          continue;
        }
      }
      saveForRenderCallback.push({});
    }
  };
  const renderedCallback = (name, q, promos, results) => {
    for (let i = 0; i < results.length; ++i) {
      const div = results[i];
      const votes = saveForRenderCallback[i]['upvotes'];
      if (votes) {
        const innerDiv = document.createElement('div');
        innerDiv.innerHTML = '<b>Upvotes: ' + votes + '</b>';
         div.insertAdjacentElement('afterbegin', innerDiv);
      }
    }
  };
  return {readyCallback, renderedCallback};
};
__gcse를 설정하는 동안 다음과 같은 코드를 사용하여 이 콜백을 설치합니다.
const {
  readyCallback: webResultsReadyCallback,
  renderedCallback: webResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
  web: {
    ready: webResultsReadyCallback,
    rendered: webResultsRenderedCallback,
  },
};
  <script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:kdroeu4mwju"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
를 참조하세요.

콜백 예시 더보기

추가 콜백 예는 다음에서 확인할 수 있습니다. 추가 콜백 예시 문서

프로모션 및 결과 속성

JSDoc 표기법을 사용하면 promotionresult 객체 여기서는 있을 수 있는 모든 속성을 나열합니다. 많은 속성이 존재하여 프로모션 또는 검색 결과의 세부정보에 따라 다릅니다.

<ph type="x-smartling-placeholder">
</ph>
프로모션 속성
{
  content: string,
  image: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  url: string,
  visibleUrl: string,
}
<ph type="x-smartling-placeholder">
</ph>
결과 객체 속성
{
  content: string,
  contentNoFormatting: string,
  contextUrl: string, // For image search results only
  fileFormat: string,
  image: { // For image search reseults only
    height: number,
    url: string,
    width: number,
  },
  perResultLabels: !Array<{
    anchor: string,
    label: string,
    labelWithOp: string,
  }>,
  richSnippet: !Array<!Object>, // For web search results only
  thumbnailImage: {
    height: number,
    url: string,
    width: number,
  },
  title: string,
  titleNoFormatting: string,
  url: string,
  visibleUrl: string,
}

결과richSnippet는 객체입니다. 이 배열의 항목 값은 구조화된 데이터 웹페이지별 검색결과 예를 들어 리뷰 웹사이트에는 이 배열 항목을 richSnippet에 추가하는 구조화된 데이터입니다.

'review': {
  'ratingstars': '3.0',
  'ratingcount': '1024',
},

Programmable Search Element Control API (V2)

google.search.cse.element 객체는 다음을 게시합니다. 정적 함수:

함수 설명
.render(componentConfig, opt_componentConfig) 검색 요소를 렌더링합니다.

매개변수

이름 설명
componentConfig 프로그래밍 검색 요소 구성요소의 구성입니다. 다음을 지정합니다. <ph type="x-smartling-placeholder">
    </ph>
  • div (문자열|요소): 프로그래밍 검색 요소를 렌더링할 <div> 또는 div 요소의 id입니다.
  • tag(문자열): 렌더링할 구성요소의 유형입니다. (opt_componentConfig가 제공되는 경우 tag 속성의 값은 searchbox이어야 합니다.) 허용되는 값은 다음과 같습니다.
    • search: 검색창과 검색 결과가 함께 표시됩니다.
    • searchbox: 프로그래밍 검색 요소의 검색창 구성요소입니다.
    • searchbox-only: 독립형 검색창으로, opt_componentConfig으로 지정된 2열 레이아웃의 검색결과 블록과 쌍을 이룹니다.
    • searchresults-only: 검색결과의 독립형 블록입니다. 검색이 URL에 삽입된 쿼리 매개변수 또는 프로그래매틱 실행에 의해 트리거됩니다.
  • gname (문자열): (선택사항) 구성요소의 고유한 이름입니다. 지정하지 않으면 프로그래밍 검색 엔진이 자동으로 gname를 생성합니다.
  • attributes (객체): 키:값 쌍 형식의 선택적 속성입니다. 지원되는 속성.
opt_componentConfig 선택사항입니다. 두 번째 구성요소 구성 인수입니다. TWO_COLUMN에서 사용됨 모드를 사용하여 searchresults 구성요소를 제공합니다. 다음을 지정합니다. <ph type="x-smartling-placeholder">
    </ph>
  • div (문자열): <div>id 또는 요소가 렌더링될 div 요소입니다.
  • tag(문자열): 렌더링할 구성요소의 유형입니다. 날짜 opt_componentConfig가 제공되면 tag의 값 속성은 searchresults여야 합니다. 또한 componentConfigtag 속성 searchbox여야 합니다.
  • gname (문자열): (선택사항) 구성요소의 고유한 이름입니다. 그렇지 않은 경우 프로그래밍 검색 엔진이 자동으로 gname를 생성합니다. 구성요소를 사용합니다. 제공되는 경우 gname componentConfig
  • attributes (객체): 키:값 형태의 선택적 속성 페어링합니다. <ph type="x-smartling-placeholder"></ph> 지원되는 속성
.go(opt_container) 지정된 컨테이너의 모든 검색 요소 태그/클래스를 렌더링합니다.

매개변수

이름 설명
opt_container 렌더링할 검색 요소 구성요소가 포함된 컨테이너입니다. 지정 컨테이너 (문자열)의 ID 또는 요소 자체입니다. 만약 생략하면 페이지 내부의 모든 프로그래밍 검색 요소 구성요소가 태그 body개가 렌더링됩니다.
.getElement(gname) gname로 요소 객체를 가져옵니다. 찾을 수 없는 경우 null을 반환합니다.

반환된 element 객체에는 다음과 같은 속성이 있습니다.

  • gname: 요소 객체의 이름입니다. 제공되지 않으면 프로그래밍 검색 엔진 객체의 gname가 자동으로 생성됩니다. 자세히 알아보기
  • type: 요소의 유형입니다.
  • uiOptions: 요소를 렌더링하는 데 사용되는 최종 속성.
  • execute - 함수(문자열): 프로그래매틱 쿼리를 실행합니다.
  • prefillQuery - 함수(문자열): 검색창을 쿼리로 미리 채웁니다. 문자열을 검색할 수 있습니다.
  • getInputQuery - function(): 입력에 표시된 현재 값을 가져옵니다. 체크박스를 선택합니다.
  • clearAllResults - function(): 다음 값을 제외한 모든 항목을 숨겨 컨트롤을 지웁니다. (있는 경우) 검색창이 표시됩니다.

다음 코드는 'news' 쿼리를 실행합니다. 을 검색 요소 'element1'에서 다음과 같이 바꿉니다.

var element = google.search.cse.element.getElement('element1');
            element.execute('news');
.getAllElements() 성공적으로 생성된 모든 요소 객체의 맵을 반환합니다. gname로 키가 지정됩니다.