이 페이지에서는 검색 요소 콜백을 사용하는 다양한 예를 보여줍니다. Custom Search Element API 문서의
콜백 섹션 에 있는 예를 보완합니다.
참고: 이 페이지의 실행 예는 JSFiddle 웹사이트에서 실행됩니다. 코드 블록의 오른쪽 상단에서 jsfiddle 버튼 을 찾습니다. 이 버튼을 누르면 JSFiddle 페이지가 열리고 HTML
, JavaScript
, css
및 run 창에 예시가 표시됩니다. '활성'으로 시작하므로 실행 창에 표시된 검색창에 쿼리를 입력하기만 하면 콜백이 실행됩니다.
이 문서의 예시는 유형과 기능에 따라 여러 부분으로 나뉘어 있지만 다음과 같습니다.
예시의 모든 부분은 JSFiddle로 함께 전송됩니다.
예시의 각 부분에는 JSFiddle 버튼이 있습니다. 모두 같은 역할을 합니다.
이 코드는 JSFiddle이고, 이 코드를 가지고 플레이할 수 있습니다. JSFiddle에서 변경한 사항은 이 문서에 다시 전파되지 않습니다.
검색 시작 콜백의 예
검색 시작 콜백은 검색에 사용되기 전에 쿼리를 수정할 수 있습니다.
프로그래밍 검색 엔진을 쿼리에 미리 정의된 검색어를 포함하도록 구성할 수 있지만, 이 콜백은 콜백 함수에 제공되는 모든 정보를 기반으로 쿼리를 수정할 수 있습니다.
다음 검색 시작 콜백은 각 쿼리를 현재 요일로 데코레이션합니다.
검색 시작 콜백 예
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const mySearchStartingCallback = (gname, query) => {
const dayOfWeek = new Date().getDay();
console.log(dayOfWeek);
var days = {
"0": "Sunday",
"1": "Monday",
"2": "Tuesday",
"3": "Wednesday",
"4": "Thursday",
"5": "Friday",
"6": "Saturday"
};
return query + ' ' + days[dayOfWeek];
};
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
starting: mySearchStartingCallback,
},
web: {
starting: mySearchStartingCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
결과 렌더링 콜백 예
결과 렌더링 콜백은 결과가 채워진 후 페이지를 수정하는 데 적합합니다.
이 메서드는 콜백이 결과 렌더링을 전적으로 책임지지 않아도 결과 표시를 쉽게 수정할 수 있도록 설계되었습니다.
다음 예는 결과에 따라 작동하지 않는 결과 렌더링된 콜백의 두 가지 적용을 보여줍니다.
마지막 결과 식별 페이지
이 결과 렌더링됨 콜백은 결과의 마지막 페이지를 표시하고 있음을 알아차리고 사용자에게 결과가 끝났음을 알리는 팝업을 표시합니다.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
var searchresults= document.getElementsByClassName("gsc-cursor-page");
var index= document.getElementsByClassName("gsc-cursor-current-page");
if(index.item(0).innerHTML == searchresults.length){
alert("This is the last results page");
}
};
콜백 설치
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
'커서' 링크의 글꼴 크기 늘리기
이 렌더링된 결과 콜백 데모는 결과 페이지를 선택하는 '커서' 숫자의 글꼴 크기를 늘립니다.
기본 글꼴 크기는 12픽셀입니다. 여기서는 20픽셀로 늘립니다.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};
콜백 설치
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
'커서' 라벨에 문자 사용
이 결과 렌더링 콜백은 '커서'의 페이지 링크를 숫자에서 문자로 변경합니다.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
var arr = document.getElementsByClassName('gsc-cursor-page');
var alp = ['A','B','C','D','E','F','G','H','I','J','K','L',
'M','N','O','p','Q','R','S','T','U','V','W','X','Y','Z'];
for (var i = 0; i < arr.length; i++) {
arr[i].innerHTML = alp[i];
}
};
콜백 설치
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
// Since the callback is in the global namespace, we can refer to it by name,
// 'myWebResultsRenderedCallback', or by reference, myWebResultsRenderedCallback.
rendered: myWebResultsRenderedCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
결과 준비 콜백 예시
교환 색상 배경으로 결과 표시
이 콜백 형식은 밝은 배경과 어두운 배경을 번갈아 가며 사용합니다.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
참고: 이 코드는 JavaScript/ES6으로 작성되었습니다. 대부분의 브라우저에서 실행되지만 Internet Explorer 및 기타 이전 브라우저의 경우 JavaScript/ES5로 변환해야 합니다.
barredResultsRenderedCallback = function(gname, query, promoElts, resultElts){
const colors = ['Gainsboro', 'FloralWhite'];
let colorSelector = 0;
for (const result of resultElts) {
result.style.backgroundColor = colors[colorSelector];
colorSelector = (colorSelector + 1) % colors.length;
}
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
rendered: barredResultsRenderedCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
워드 클라우드
결과 준비됨 콜백의 명확한 적용은 렌더링된 결과 콜백을 사용하여 HTML을 조정하면 도달하기 어려운 형식으로 검색결과를 표시하는 것입니다. 결과 준비됨 콜백은 빈 div
로 시작합니다.
Search Element API 문서의 한 예 에서는 콜백을 사용하여 매우 간단한 버전의 결과를 렌더링하는 방법을 보여주었습니다.
또 다른 예 는 결과 준비 완료 콜백의 결과 데이터를 보관하고 표준 결과 디스플레이를 장식하는 데 사용할 수 있는 렌더링된 결과 콜백에 전달하는 방법을 보여주었습니다.
다음 결과 준비됨 콜백은 검색결과가 결과 목록일 필요가 없음을 보여줍니다. 이 기능은 일반적인 검색 결과 표시를 결과의 제목 및 콘텐츠에서 발견된 단어 구름으로 대체합니다. 결과 목록이 사용자의 중간 단계에 불과한 경우 이와 같은 콜백은 이 단계를 우회하고 결과를 사용하여 사용자가 원하는 보고서를 표시할 수 있습니다.
검색결과 콘텐츠에서 Word Cloud 만들기
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<style>
#container {
width: 100%;
height: 4.5in;
margin: 0;
padding: 0;
}
</style>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/v8/js/anychart-tag-cloud.min.js"></script>
참고: 이 코드는 JavaScript/ES6으로 작성되었습니다. 대부분의 브라우저에서 실행되지만 Internet Explorer 및 기타 일부 이전 브라우저의 경우 JavaScript/ES5로 변환해야 합니다.
const resultsReadyWordCloudCallback = function(
name, q, promos, results, resultsDiv) {
const stopWords = new Set()
.add('a')
.add('A')
.add('an')
.add('An')
.add('and')
.add('And')
.add('the')
.add('The');
const words = {};
const splitter = /["“”,\?\s\.\[\]\{\};:\-\(\)\/!@#\$%\^&*=\+\*]+/;
if (results) {
for (const {contentNoFormatting, titleNoFormatting} of results) {
const wordArray = (contentNoFormatting + ' ' + titleNoFormatting)
.split(splitter)
.map(w => w.toLowerCase());
for (const w of wordArray) {
if (w && !stopWords.has(w)) {
words[w] = (words[w] + 1) || 1;
}
}
}
}
const dataForChart = [];
for (const key in words) {
const val = words[key];
dataForChart.push({
'x': key,
'value': val,
});
}
const container = document.createElement('div');
resultsDiv.appendChild(container);
container.id = 'container';
// create a tag (word) cloud chart
const chart = anychart.tagCloud(dataForChart);
// set a chart title
chart.title(`Words for query: "${q}"`)
// set an array of angles at which the words will be laid out
chart.angles([0, 45, 90, 135])
// display the word cloud chart
chart.container(container);
chart.draw();
return true; // Don't display normal search results.
};
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: resultsReadyWordCloudCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
콜백 예
결과 준비됨 및 렌더링된 결과 콜백을 함께 사용하여 전자에서 후자에 정보를 전달할 수 있습니다.
예를 들어 결과 객체의 배열에 있는 정보는 results Ready 콜백에서는 사용할 수 있지만 results 렌더링 콜백에서는 사용할 수 없습니다.
결과 준비됨 콜백의 일부로 이 정보를 배열에 저장하여 렌더링된 결과 콜백에 액세스할 수 있습니다.
한 가지 예는 이미지 결과를 클릭할 때 표시되는 미리보기 패널을 우회하는 것입니다.
두 부분으로 구성된 콜백을 사용하면 클릭했을 때 이미지 미리보기를 표시하는 대신, 이미지 결과가 해당 웹사이트로 직접 연결되도록 할 수 있습니다.
이미지 미리보기 우회
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>
const makeTwoPartCallback = () => {
let urls;
const readyCallback = (name, q, promos, results, resultsDiv) => {
urls = [];
for (const result of results) {
urls.push(result['contextUrl']);
}
};
const renderedCallback = (name, q, promos, results) => {
const removeEventListeners = element => {
const clone = element.cloneNode(true);
element.parentNode.replaceChild(clone, element);
return clone;
};
for (let i = 0; i < results.length; ++i) {
const element = removeEventListeners(results[i]);
element.addEventListener('click', () => window.location.href = urls[i]);
}
};
return {readyCallback, renderedCallback};
};
const {
readyCallback: imageResultsReadyCallback,
renderedCallback: imageResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
ready: imageResultsReadyCallback,
rendered: imageResultsRenderedCallback,
},
};
HTML에 다음 요소를 포함합니다.
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>