HTML 마크업을 사용하여 웹페이지 및 기타 웹 애플리케이션에 프로그래밍 검색 엔진 구성요소 (검색창 및 검색결과 페이지)를 삽입할 수 있습니다. 이러한 프로그래밍 검색 엔진 요소는 프로그래밍 검색 서버가 저장한 설정에 따라 렌더링되는 구성요소와 사용자가 지정하는 맞춤설정으로 구성됩니다.
모든 자바스크립트는 비동기식으로 로드되므로 브라우저에서 프로그래밍 검색 엔진 자바스크립트를 가져오는 동안에도 웹페이지가 계속 로드됩니다.
소개
이 문서에서는 프로그래밍 검색 엔진 요소를 웹페이지에 추가하기 위한 기본 모델과 함께 요소의 구성 가능한 구성요소 및 유연한 JavaScript API에 관한 설명을 제공합니다.
범위
이 문서에서는 Programmable Search Engine Control API와 관련된 함수와 속성을 사용하는 방법을 설명합니다.
브라우저 호환성
프로그래밍 검색 엔진에서 지원하는 브라우저 목록은 여기에서 확인할 수 있습니다.
시청자층
이 문서는 Google 프로그래밍 검색 기능을 페이지에 추가하려는 개발자를 대상으로 합니다.
프로그래밍 검색 요소
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"> |
독립형 검색창 |
| 검색결과만 | <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"> |
| 두 페이지 | 첫 번째 페이지에는 <div class="gcse-searchbox-only">, 두 번째 페이지에는 <div class="gcse-searchresults-only"> (또는 다른 구성요소) |
| 결과만 | <div class="gcse-searchresults-only"> |
| Google 호스팅 | <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-only에는 gname 'searchbox-only0'이 있고 두 번째에는 gname 'seachbox-only1'이 있는 식입니다.
2열 레이아웃의 구성요소에 관해 자동으로 생성된 gname는 two-column입니다. 다음 예에서는 gname storesearch를 사용하여 searchbox 구성요소를 searchresults 구성요소와 연결합니다. <div class="gcse-searchbox" data-gname="storesearch"></div> <div class="gcse-searchresults" data-gname="storesearch"></div> 객체를 가져올 때 |
모두 |
autoSearchOnLoad |
불리언 | 로드 중인 페이지의 URL에 삽입된 쿼리를 통해 검색을 실행할지 여부를 지정합니다. 자동 검색을 실행하려면 URL에 쿼리 문자열이 있어야 합니다. 기본값: true |
모두 |
enableHistory |
불리언 | true인 경우 브라우저의 뒤로 및 앞으로 버튼에 대한 기록 관리를 사용 설정합니다. 데모 보기 |
searchbox 검색창 전용 |
queryParameterName |
문자열 | 쿼리 매개변수 이름입니다(예: q(기본값) 또는 query). 이러한 이름은 URL에 삽입됩니다 (예: http://www.example.com?q=lady+gaga). 쿼리 매개변수 이름만 지정하는 경우 로드 시 자동 검색이 트리거되지 않습니다. 자동 검색을 실행하려면 URL에 쿼리 문자열이 있어야 합니다. |
모두 |
resultsUrl |
URL | 결과 페이지의 URL입니다. (기본값은 Google에서 호스팅하는 페이지입니다.) | 검색창 전용 |
newWindow |
불리언 | 결과 페이지를 새 창에서 열도록 지정합니다.
기본값: false |
검색창 전용 |
ivt |
불리언 |
이 매개변수를 사용하면 동의한 트래픽 및 동의하지 않은 트래픽 모두에서 무효 트래픽 전용 쿠키와 로컬 저장소를 사용하는 광고를 허용할 것임을 Google에 알리는 불리언을 제공할 수 있습니다.
기본값: 사용 예시는 |
검색결과 검색결과만 |
mobileLayout |
문자열 |
휴대기기에 모바일 레이아웃 스타일을 사용할지 여부를 지정합니다.
기본값: 사용 예시는 |
모두 |
| 자동 완성 | |||
enableAutoComplete |
불리언 | 프로그래밍 검색 엔진 패널에서 자동 완성이 사용 설정된 경우에만 사용할 수 있습니다.
true는 자동 완성을 사용 설정합니다. |
모두 |
autoCompleteMaxCompletions |
정수 | 표시할 자동 완성의 최대 개수입니다. | searchbox 검색창 전용 |
autoCompleteMaxPromotions |
정수 | 자동 완성에 표시할 최대 프로모션 수입니다. | searchbox 검색창 전용 |
autoCompleteValidLanguages |
문자열 | 자동 완성을 사용 설정해야 하는 언어를 쉼표로 구분한 목록입니다. 지원되는 언어. | searchbox 검색창 전용 |
| 세분화 | |||
defaultToRefinement |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에서 상세검색을 생성한 경우에만 사용할 수 있습니다. 표시할 기본 상세검색 라벨을 지정합니다.참고: 이 속성은 Google 호스팅 레이아웃에서 지원되지 않습니다. | 모두 |
refinementStyle |
문자열 | 허용되는 값은 tab (기본값) 및 link입니다.
link는 이미지 검색이 사용 중지되었거나 이미지 검색이 사용 설정되어 있지만 웹 검색은 사용 중지된 경우에만 지원됩니다. |
검색결과 검색결과만 |
| 이미지 검색 | |||
enableImageSearch |
불리언 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
|
검색결과 검색결과만 |
defaultToImageSearch |
불리언 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
|
모두 |
imageSearchLayout |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
이미지 검색결과 페이지의 레이아웃을 지정합니다. 허용되는 값은
|
검색결과 검색결과만 |
imageSearchResultSetSize |
정수, 문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
이미지 검색을 위한 검색결과 세트의 최대 크기를 지정합니다.
예: |
모두 |
image_as_filetype |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
지정된 확장자의 파일로 결과를 제한합니다. 지원되는 확장자는 | 모두 |
image_as_oq |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
논리합(OR)을 사용하여 검색결과를 필터링합니다. 'term1' 또는 'term2'가 포함된 검색 결과를 원하는 경우의 사용 예시는 다음과 같습니다. | 모두 |
image_as_rights |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
라이선스를 기반으로 한 필터입니다. 지원되는 값은 일반적인 조합을 참고하세요. | 모두 |
image_as_sitesearch |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
검색결과를 특정 사이트의 페이지로 제한합니다. 사용 예시는 | 모두 |
image_colortype |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
흑백 (모노), 그레이 스케일 또는 컬러 이미지로 검색을 제한합니다. 지원되는 값은 | 모두 |
image_cr |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
출처가 특정 국가인 문서로 검색결과를 제한합니다. | 모두 |
image_dominantcolor |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
특정 주요 색상의 이미지로 검색을 제한합니다.
지원되는 값은 | 모두 |
image_filter |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
검색결과를 자동 필터링합니다. 지원되는 값: 0/1 사용 예시는 | 모두 |
image_gl |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에 이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다. 출발 국가가 매개변수 값과 일치하는 검색결과를 우선적으로 표시합니다. | 모두 |
image_size |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
지정된 크기의 이미지를 반환합니다. 여기에서 크기는 | 모두 |
image_sort_by |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
날짜 또는 다른 구조화된 콘텐츠를 사용하여 결과를 정렬합니다. 관련성에 따라 정렬하려면 빈 문자열 (image_sort_by="")을 사용합니다. 사용 예시는 | 모두 |
image_type |
문자열 | 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 사용할 수 있습니다.
특정 유형의 이미지로 검색을 제한합니다.
지원되는 값은 | 모두 |
| 웹 검색 | |||
disableWebSearch |
불리언 | true인 경우 웹 검색이 사용 중지됩니다. 프로그래밍 검색 엔진 컨트롤 패널에
이미지 검색이 사용 설정된 경우에만 일반적으로 사용됩니다. |
검색결과 검색결과만 |
webSearchQueryAddition |
문자열 | 논리적 OR을 사용하여 검색어에 추가된 용어입니다.
사용 예시는 |
모두 |
webSearchResultSetSize |
정수, 문자열 | 결과 세트의 최대 크기입니다. 이미지 검색과 웹 검색 모두에 적용됩니다. 기본값은 레이아웃, 그리고 프로그래밍 검색 엔진이 전체 웹을 검색하도록 구성되었는지 아니면 지정된 사이트만 검색하도록 구성되었는지에 따라 다릅니다. 사용 가능한 값은 다음과 같습니다.
|
모두 |
webSearchSafesearch |
문자열 |
웹 검색 결과에 SafeSearch를 사용 설정할지 지정합니다. 허용되는 값은 off 및 active입니다.
|
모두 |
as_filetype |
문자열 | 지정된 확장자의 파일로 결과를 제한합니다. Google에서 색인을 생성할 수 있는 파일 형식 목록은 Search Console 고객센터에서 확인할 수 있습니다. | 모두 |
as_oq |
문자열 | 논리합(OR)을 사용하여 검색결과를 필터링합니다.
'term1' 또는 'term2'가 포함된 검색 결과를 원하는 경우의 사용 예시는 다음과 같습니다. |
모두 |
as_rights |
문자열 | 라이선스를 기반으로 한 필터입니다.
지원되는 값은 일반적인 조합은 https://wiki.creativecommons.org/wiki/CC_Search_integration을 참조하세요. | 모두 |
as_sitesearch |
문자열 | 검색결과를 특정 사이트의 페이지로 제한합니다.
사용 예시는 |
모두 |
cr |
문자열 | 출처가 특정 국가인 문서로 검색결과를 제한합니다.
사용 예시는 |
모두 |
filter |
문자열 | 검색결과를 자동 필터링합니다.
지원되는 값: 0/1 사용 예시는 |
모두 |
gl |
문자열 | 출발 국가가 매개변수 값과 일치하는 검색결과를 우선적으로 표시합니다.
이는 language value 설정과 함께 사용할 때만 작동합니다. 사용 예시는 |
모두 |
lr |
문자열 | 특정 언어로 작성된 문서로 검색결과를 제한합니다.
사용 예시는 |
모두 |
sort_by |
문자열 | 날짜 또는 다른 구조화된 콘텐츠를 사용하여 결과를 정렬합니다. 속성 값은 프로그래밍 가능한 검색 egnine의 결과 정렬 설정에 제공된 옵션 중 하나여야 합니다.
관련성에 따라 정렬하려면 빈 문자열 (sort_by='')을 사용합니다. 사용 예시는 |
모두 |
| 검색결과 | |||
enableOrderBy |
불리언 | 관련성, 날짜 또는 라벨별로 결과를 정렬할 수 있습니다. | 모두 |
linkTarget |
문자열 | 링크 대상을 설정합니다. 기본값: _blank |
검색결과 검색결과만 |
noResultsString |
문자열 | 쿼리와 일치하는 결과가 없을 때 표시할 기본 텍스트를 지정합니다. 기본 결과 문자열은 지원되는 모든 언어로 현지화된 문자열을 표시하는 데 사용할 수 있지만 맞춤설정된 문자열은 그렇지 않습니다. | 검색결과 검색결과만 |
resultSetSize |
정수, 문자열 | 결과 세트의 최대 크기입니다. 예: large, small, filtered_cse, 10 기본값은 레이아웃, 그리고 엔진이 전체 웹을 검색하도록 구성되었는지 아니면 지정된 사이트만 검색하도록 구성되었는지에 따라 다릅니다. |
모두 |
safeSearch |
문자열 | 웹과 이미지 검색 모두에
세이프서치를 사용할지를 지정합니다. 허용되는 값은 off 및 active입니다. |
모두 |
콜백
콜백은 검색 요소 초기화 및 검색 프로세스를 세부적으로 제어할 수 있습니다.
전역 __gcse 객체를 통해 검색 요소 자바스크립트에 등록됩니다. 등록 콜백은 지원되는 모든 콜백의 등록을 보여줍니다.
window.__gcse = {
parsetags: 'explicit', // Defaults to 'onload'
initializationCallback: myInitializationCallback,
searchCallbacks: {
image: {
starting: myImageSearchStartingCallback,
ready: myImageResultsReadyCallback,
rendered: myImageResultsRenderedCallback,
},
web: {
starting: myWebSearchStartingCallback,
ready: myWebResultsReadyCallback,
rendered: myWebResultsRenderedCallback,
},
},
};
초기화 콜백
초기화 콜백은 검색 요소 자바스크립트가 DOM에서 검색 요소를 렌더링하기 전에 호출됩니다. __gcse에서 parsetags가 explicit로 설정된 경우 검색 요소 자바스크립트는 렌더링 검색 요소를 초기화 콜백에 남겨둡니다 (콜백 등록에 나와 있음).
이는 렌더링할 요소를 선택하거나 필요할 때까지 렌더링 요소를 지연하는 데 사용할 수 있습니다. 또한 요소의 속성을 재정의할 수 있습니다. 예를 들어 제어판 또는 HTML 속성을 통해 구성된 검색창을
기본 웹 검색으로 이미지 검색창으로 바꾸거나, 프로그래밍 검색 엔진 양식을 통해 제출된 쿼리가 검색결과 전용 요소에서 실행되도록
지정할 수 있습니다.
데모 보기
초기화 콜백의 역할은 __gcse의 parsetags 속성 값으로 제어됩니다.
- 값이
onload이면 검색 요소 자바스크립트가 페이지의 모든 검색 요소를 자동으로 렌더링합니다. 초기화 콜백은 계속 호출되지만 검색 요소를 렌더링하지는 않습니다. - 값이
explicit이면 검색 요소 자바스크립트가 검색 요소를 렌더링하지 않습니다. 콜백은render()함수를 사용하여 선택적으로 렌더링하거나go()함수를 사용하여 모든 검색 요소를 렌더링할 수 있습니다.
다음 코드는 explicit 파싱 태그와 초기화 콜백을 사용하여 div에서 검색결과와 함께 검색창을 렌더링하는 방법을 보여줍니다.
검색 요소 코드를 추가할 ID 값과 함께 <div>를 포함해야 합니다.
<div id="test"></div><div> 뒤에 이 자바스크립트를 추가합니다. <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
};
id인 test를 참조합니다.
검색 요소를 로드하려면 이 HTML을 포함하세요. src 절의 cx 값을 고유한 cx로 바꿉니다.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
콜백 검색
검색 요소 자바스크립트는 검색 제어 흐름에서 작동하는 콜백을 6가지 지원합니다. 검색 콜백은 쌍으로, 웹 검색 콜백 및 일치하는 이미지 검색 콜백으로 제공됩니다.
- 검색 시작
- 이미지 검색
- 웹 검색
- 결과 준비됨
- 이미지 검색
- 웹 검색
- 렌더링된 결과
- 이미지 검색
- 웹 검색
초기화 콜백과 마찬가지로 검색 콜백은 __gcse 객체의 항목을 사용하여 구성됩니다. 이는 검색 요소 자바스크립트가 시작될 때 발생합니다. 시작 후 __gcse의 수정사항은 무시됩니다.
이러한 각 콜백에는 검색 요소의 gName가 인수로 전달됩니다.
gname는 페이지에 둘 이상의 검색이 포함된 경우에 유용합니다. data-gname 속성을 사용하여 검색 요소에 gname 값을 부여합니다.
<div class="gcse-searchbox" data-gname="storesearch"></div>
HTML이 gname을 식별하지 못하는 경우 검색 요소 자바스크립트는 HTML이 수정될 때까지 일관되게 유지되는 값을 생성합니다.
이미지/웹 검색 시작 콜백
검색 시작 콜백은 검색 요소 JavaScript가 서버에 검색결과를 요청하기 직전에 호출됩니다. 예시 사용 사례로는 현지 시간을 사용하여 쿼리 변경사항을 제어할 수 있습니다.
searchStartingCallback(gname, query)
gname- 검색 요소 식별 문자열
query 사용자가 입력한 - 값 (검색 요소 자바스크립트로 수정될 수 있음)
콜백은 이 검색을 위한 쿼리로 사용해야 하는 값을 반환합니다. 빈 문자열을 반환하면 반환 값은 무시되고 호출자는 수정되지 않은 쿼리를 사용합니다.
또는 __gcse 객체에 콜백 함수를 포함하거나 JavaScript를 사용하여 객체에 콜백을 동적으로 추가할 수 있습니다.
window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
검색 시작 콜백의 예
검색 시작 콜백 예의 검색 시작 콜백 예는 시간에 따라 쿼리에 morning 또는 afternoon를 추가합니다.
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>
이미지/웹 검색결과 준비 콜백
다음 콜백은 검색 요소 자바스크립트가 프로모션 및 결과를 렌더링하기 직전에 호출됩니다. 예를 들어 프로모션을 렌더링하고 일반적인 맞춤설정으로 지정할 수 없는 스타일을 생성하는 콜백이 있습니다.
resultsReadyCallback(gname, query, promos, results, div)
gname- 검색 요소 식별 문자열
query- 이러한 결과를 생성한 쿼리
promos- 사용자 쿼리에 일치하는 프로모션에 해당하는 프로모션 객체의 배열입니다. 프로모션 객체 정의를 참조하세요.
results- 결과 객체의 배열입니다. 결과 객체 정의를 참고하세요.
div- 검색 요소가 일반적으로 프로모션과 검색결과를 배치하는 DOM의 HTML div입니다. 일반적으로 검색 요소 자바스크립트는 이 div 채우기를 처리하지만 이 콜백에서 결과의 자동 렌더링을 중지하고 이
div를 사용하여 결과 자체를 렌더링할 수도 있습니다.
이 콜백이 true 값을 반환하면 검색 요소 자바스크립트가 페이지 바닥글 작업으로 건너뜁니다.
예시 결과 준비 콜백
결과가 준비된 콜백 예시의 resultsReady 콜백 예는 프로모션 및 결과의 기본 표시를 매우 간단한 교체로 재정의합니다.
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 객체에 콜백을 넣는 여러 방법 중 하나입니다.
이미지/웹 검색결과 렌더링 콜백
다음 콜백은 검색 요소 자바스크립트가 페이지 바닥글을 렌더링하기 직전에 호출됩니다. 사용 사례로는 저장 체크박스나 자동으로 렌더링되지 않는 정보 등 검색 요소가 표시하지 않는 결과 콘텐츠를 추가하는 콜백이나 추가 정보 버튼을 추가하는 콜백이 있습니다.
렌더링된 결과 콜백에 결과 준비 콜백의 promos 및 results 매개변수에 있는 정보가 필요한 경우 다음과 같이 정보를 전달할 수 있습니다.
callback(gname, query, promoElts, resultElts);
gname- 검색 요소 식별 문자열
query- 검색 문자열.
promoElts- 프로모션이 포함된 DOM 요소의 배열입니다.
resultElts- 결과가 포함된 DOM 요소의 배열입니다.
반환 값은 없습니다.
렌더링된 결과 콜백의 예
결과 렌더링 콜백 예의 resultsRendered 콜백 예는 각 프로모션 및 결과에 더미 Keep 체크박스를 추가합니다.
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의 평점 값을 결과 준비 콜백에서 렌더링된 결과 콜백으로 전달하는 여러 방법 중 하나를 보여줍니다.
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 표기법을 사용하면 promotion 및 result 객체의 속성입니다. 여기서는 존재할 수 있는 모든 속성을 나열합니다. 많은 숙박 시설의 존재 여부는 프로모션 또는 검색결과의 세부정보에 따라 다릅니다.
{
content: string,
image: {
height: number,
url: string,
width: number,
},
title: string,
url: string,
visibleUrl: string,
}
{
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) |
검색 요소를 렌더링합니다.
매개변수
|
||||||
.go(opt_container) |
지정된 컨테이너에서 모든 검색 요소 태그/클래스를 렌더링합니다.
매개변수
|
||||||
.getElement(gname) |
gname로 요소 객체를 가져옵니다. 찾을 수 없으면 null을 반환합니다.
반환된
다음 코드는 검색 요소 'element1'에서 검색어 'news'를 실행합니다. var element = google.search.cse.element.getElement('element1');
element.execute('news');
|
||||||
.getAllElements() |
gname로 키가 지정된, 성공적으로 생성된 모든 요소 객체의 맵을 반환합니다. |