프로그래밍 검색 엔진 구성요소 (검색창 및 검색결과 페이지)를 웹 페이지 및 기타 웹 애플리케이션을 쉽게 관리할 수 있습니다. 프로그래밍 검색 엔진 요소는 각 요소가 저장한 설정에 따라 렌더링되는 프로그래밍 검색 서버와 사용자가 직접 지정한 모든 맞춤설정까지 확인할 수 있습니다.
모든 자바스크립트는 비동기식으로 로드되어 브라우저가 프로그래밍 검색 엔진 자바스크립트를 가져오는 동안 계속 로드되도록 합니다.
소개
이 문서에서는 프로그래밍 검색 엔진을 추가하기 위한 기본 모델을 제공합니다. 요소의 설명을 비롯하여 웹페이지에 대한 구성 가능한 구성요소와 유연한 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-only에 gname '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> 객체를 검색할 때 둘 이상의 구성요소에 동일한
|
모두 |
autoSearchOnLoad |
불리언 | URL에 포함된 검색어로 검색을 실행할지 여부를 지정합니다.
확인할 수 있습니다 검색어 문자열은 URL에 있어야 하고
자동 검색을 실행합니다. 기본값: true |
모두 |
enableHistory |
불리언 | true인 경우 브라우저의 기록 관리를 사용 설정합니다. '뒤로'
전달할 수 있습니다. 데모 보기 |
검색창 검색창만 |
queryParameterName |
문자열 | 쿼리 매개변수 이름. 예: q (기본값)
또는 query. URL에 삽입됩니다 (예:
http://www.example.com?q=lady+gaga)를 입력합니다. 참고:
검색어 매개변수 이름만으로는 로드 시 자동 검색이 트리거되지 않습니다. 쿼리
문자열이 있어야 자동 검색을 실행할 수 있습니다. |
모두 |
resultsUrl |
URL | 결과 페이지의 URL입니다. 기본값은 Google에서 호스팅하는 페이지입니다. | 검색창만 |
newWindow |
불리언 | 결과 페이지를 새 창에서 열지 지정합니다.
기본값: false |
검색창만 |
ivt |
불리언 |
이 매개변수를 사용하면 무효 트래픽 전용 쿠키를 사용하는 광고 및 로컬 스토리지에 저장된 사용자 동의가 이루어지지 않은 트래픽을 추적할 수 있습니다
기본값: 사용 예시는 |
검색 결과 searchresults-only |
mobileLayout |
문자열 |
휴대기기에 모바일 레이아웃 스타일을 사용해야 하는지 여부를 지정합니다.
기본값: 사용 예시는 |
모두 |
| 자동 완성 | |||
enableAutoComplete |
불리언 | 프로그래밍 검색 엔진 제어판에서 자동 완성을 사용하도록 설정한 경우에만 사용할 수 있습니다.
true는 자동 완성을 사용 설정합니다. |
모두 |
autoCompleteMaxCompletions |
정수 | 표시할 자동 완성의 최대 개수입니다. | 검색창 검색창만 |
autoCompleteMaxPromotions |
정수 | 자동 완성에 표시할 최대 프로모션 수입니다. | 검색창 검색창만 |
autoCompleteValidLanguages |
문자열 | 자동 완성이 필요한 언어를 쉼표로 구분한 목록입니다. 사용 설정되어 있습니다. <ph type="x-smartling-placeholder"></ph> 지원되는 언어 | 검색창 검색창만 |
| 상세검색 | |||
defaultToRefinement |
문자열 | 프로그래밍 검색 엔진 제어판 기본 상세검색 라벨을 지정합니다. display.참고: 이 속성은 Google 호스팅 레이아웃에서 지원되지 않습니다. | 모두 |
refinementStyle |
문자열 | 허용되는 값은 tab (기본값) 및 link입니다.
link는 이미지 검색이 사용 중지된 경우에만 지원됩니다.
이미지 검색은 사용하고 웹 검색은 사용하지 않도록 설정되어 있습니다. |
검색 결과 searchresults-only |
| 이미지 검색 | |||
enableImageSearch |
불리언 | 인 경우에만 사용 가능
프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.
|
검색 결과 searchresults-only |
defaultToImageSearch |
불리언 | 인 경우에만 사용 가능
프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.
|
모두 |
imageSearchLayout |
문자열 | 인 경우에만 사용 가능
프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다.
이미지 검색결과 페이지의 레이아웃을 지정합니다. 사용 가능한 값
|
검색 결과 searchresults-only |
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인 경우 웹 검색을 사용 중지합니다. 일반적으로
<ph type="x-smartling-placeholder"></ph>
프로그래밍 검색 엔진 제어판에서 이미지 검색이 사용 설정되었습니다. |
검색 결과 searchresults-only |
webSearchQueryAddition |
문자열 | 논리 OR을 사용하여 검색어에 추가된 용어입니다.
사용 예시는 |
모두 |
webSearchResultSetSize |
정수, 문자열 | 결과 집합의 최대 크기입니다. 적용 대상
이미지 검색과 웹 검색 모두 기본값은 레이아웃과
프로그래밍 검색 엔진이 전체 웹을 검색하도록 구성되어 있는지
사이트 사용 가능한 값은 다음과 같습니다.
<ph type="x-smartling-placeholder">
|
모두 |
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 |
문자열 | 출처 국가가 매개변수 값과 일치하는 검색결과를 우선적으로 표시합니다.
이 속성은 언어 값 설정과 함께 사용해야 합니다. 사용 예시는 |
모두 |
lr |
문자열 | 특정 언어로 작성된 문서로 검색결과를 제한합니다.
사용 예시는 |
모두 |
sort_by |
문자열 | 날짜 또는 다른 구조화된 콘텐츠를 사용하여 결과를 정렬합니다. 속성 값은 프로그래밍 검색 에나인의 결과 정렬 설정에 제공된 옵션 중 하나여야 합니다.
관련성을 기준으로 정렬하려면 빈 문자열 (sort_by="")을 사용합니다. 사용 예시는 |
모두 |
| 검색 결과 | |||
enableOrderBy |
불리언 | 관련성, 날짜 또는 라벨별로 결과를 정렬할 수 있습니다. | 모두 |
linkTarget |
문자열 | 링크 대상을 설정합니다. 기본값: _blank |
검색 결과 searchresults-only |
noResultsString |
문자열 | 쿼리와 일치하는 결과가 없을 때 표시할 기본 텍스트를 지정합니다. 기본 결과 문자열은 모든 언어에서 현지화된 문자열을 표시하는 데 맞춤설정된 번역은 그렇지 않습니다. | 검색 결과 searchresults-only |
resultSetSize |
정수, 문자열 | 결과 집합의 최대 크기입니다. 예를 들면 large입니다.
small, filtered_cse, 10 이
레이아웃 및 엔진이 검색을 지원하도록 구성되어 있는지 여부에 따라
전체 웹 또는 특정 사이트만 타겟팅하도록 설정할 수 있습니다. |
모두 |
safeSearch |
문자열 | 다음과 같이 지정합니다.
세이프서치는 웹 검색과 이미지 검색 모두에 사용됩니다. 허용되는 값은 off입니다.
및 active |
모두 |
콜백
<ph type="x-smartling-placeholder">
콜백은 검색 요소 초기화 및 검색 프로세스의 세부적인 제어를 지원합니다.
이는 전역 __gcse를 통해 검색 요소 JavaScript에 등록됩니다.
객체를 지정합니다. 콜백 등록은 모든 콜백이 등록되고
지원되는 콜백을 사용합니다.
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가 검색을 렌더링하기 전에 호출됩니다.
요소에 구성됩니다. parsetags가 explicit로 설정된 경우
__gcse이면 검색 요소 JavaScript는 렌더링 검색 요소를
초기화 콜백 (콜백 등록 참조)
렌더링할 요소를 선택하거나 렌더링될 때까지 렌더링을 지연하는 데 사용할 수 있습니다.
할 수 있습니다 요소의 속성을 재정의할 수도 있습니다. 예를 들어
제어판 또는 HTML 속성을 통해 웹으로 기본 설정되는 검색창
이미지 검색창으로 검색하거나 프로그래밍 검색 엔진 양식을 통해 제출된 검색어가
검색 결과 전용 요소에서 실행됩니다.
<ph type="x-smartling-placeholder"></ph>
데모 보기
초기화 콜백의 역할은 parsetags 값으로 제어됩니다.
__gcse의 속성입니다.
- 값이
onload인 경우 검색 요소 JavaScript는 페이지의 모든 검색 요소를 자동으로 렌더링합니다. 초기화 콜백은 호출되지만 검색 요소 렌더링을 담당하지는 않습니다. - 값이
explicit인 경우 검색 요소 JavaScript가 렌더링되지 않습니다. 검색 요소 콜백은render()함수 또는go()함수로 모든 검색 요소를 렌더링합니다.
다음 코드는
explicit parsetag 및 초기화 콜백을 사용하는 div:
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 값을 바꿉니다.
자체 cx와 src 절을 함께 사용합니다.
<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을 쿼리에 추가합니다.
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 콜백 예시는 다음과 같습니다.
예시 결과 준비 콜백은 기본 프레젠테이션을 재정의합니다.
아주 쉽게 대체할 수 있습니다.
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가 페이지를 렌더링하기 직전에 호출됩니다. 바닥글 사용 사례의 예에는 검색이 요소가 표시되지 않는 경우(예: 이 항목 저장 체크박스 또는 자동으로 렌더링되거나 자세한 정보 버튼을 추가하는 콜백 등이 있습니다.
결과 렌더링된 콜백에 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 객체 여기서는 있을 수 있는 모든 속성을 나열합니다. 많은 속성이 존재하여 프로모션 또는 검색 결과의 세부정보에 따라 다릅니다.
<ph type="x-smartling-placeholder">{
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을 반환합니다.
반환된
다음 코드는 'news' 쿼리를 실행합니다. 을 검색 요소 'element1'에서 다음과 같이 바꿉니다. var element = google.search.cse.element.getElement('element1');
element.execute('news');
|
||||||
.getAllElements() |
성공적으로 생성된 모든 요소 객체의 맵을 반환합니다. gname로 키가 지정됩니다. |