검색 시작 콜백 예시
검색 시작 콜백은 검색에 사용되기 전에 쿼리를 수정할 수 있습니다. 프로그래밍 검색 엔진은 미리 결정된 용어를 쿼리에 포함하도록 구성할 수 있지만 이 콜백은 콜백 함수에 제공되는 정보를 기반으로 쿼리를 수정할 수 있습니다.
다음 search starting 콜백은 각 쿼리에 현재 요일을 추가합니다.
<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:g9ckaktfipe"></script>
사용자 동의 확인으로 보호되는 localStorage에 최근 검색어를 저장하는 도우미 함수를 정의합니다.
// For this demo, consent is assumed to be granted.
// In production, integrate this with your site's Consent Management Platform (CMP).
window.__hasStorageConsent = true;
function hasStorageConsent() {
return window.__hasStorageConsent === true;
}
function saveRecentSearch(query) {
if (!query || !hasStorageConsent()) return;
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Invalid localStorage data, resetting:", e);
// searches remains [] to overwrite the corrupted data
}
searches = searches.filter(item => item !== query);
searches.unshift(query);
searches = searches.slice(0, 5);
try {
localStorage.setItem("recentSearches", JSON.stringify(searches));
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
}
검색 시작 콜백을 등록합니다. 콜백은 cse.js을 로드하기 전에 전역 __gcse 객체에 등록해야 합니다.
// Install the callback.
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
starting: function (gname, query) {
saveRecentSearch(query);
renderRecentSearches();
return query; // continue normal search
},
},
};
최근 검색어를 클릭 가능한 항목으로 렌더링하는 함수를 정의하고 페이지 로드 시 초기화합니다.
function renderRecentSearches() {
const container = document.getElementById("recent-searches");
if (!container) return;
if (!hasStorageConsent()) {
container.innerHTML = "";
try {
localStorage.removeItem("recentSearches");
} catch(e) {}
return;
}
let searches = [];
try {
searches = JSON.parse(localStorage.getItem("recentSearches")) || [];
} catch (e) {
console.warn("Unable to access localStorage:", e);
}
container.innerHTML = "";
searches.forEach(q => {
const item = document.createElement("button");
item.type = "button";
item.textContent = q;
item.onclick = () => {
const input = document.querySelector("input.gsc-input");
const button = document.querySelector("button.gsc-search-button");
if (input) input.value = q;
if (button) button.click();
};
container.appendChild(item);
});
}
window.addEventListener("DOMContentLoaded", function () {
renderRecentSearches();
});
HTML에 다음 요소를 포함하세요.
<style>
#recent-searches button {
display: inline-block;
margin-right: 8px;
margin-top: 4px;
padding: 2px 8px;
background-color: #f1f3f4;
border: 1px solid #dadce0;
border-radius: 4px;
cursor: pointer;
font-size: 13px;
}
</style>
<div class="gcse-search"></div>
<div id="recent-searches"></div>
제한사항
- 데이터는 브라우저 (
localStorage)에만 저장되며 사용자 동의가 필요합니다. - 기기 또는 사용자 간에 공유되지 않습니다.
- 브라우저 저장소가 삭제되면 삭제됩니다.
- 이 페이지 외부에서 이루어진 검색은 추적하지 않습니다.
결과 렌더링 콜백 예시
렌더링된 결과 콜백은 결과로 채워진 후 페이지를 수정하는 데 유용합니다. 콜백이 결과를 렌더링하는 전체 책임을 지지 않아도 결과 표시를 쉽게 수정할 수 있도록 설계되었습니다.
다음 예는 결과를 조작하지 않는 결과 렌더링 콜백의 두 가지 적용 사례를 보여줍니다.
이 결과 렌더링됨 콜백은 결과의 마지막 페이지가 표시되고 있음을 확인하고 사용자에게 끝에 도달했음을 알리는 알림을 표시합니다.
<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>이 results rendered 콜백 데모는 결과 페이지를 선택하는 '커서' 숫자의 글꼴 크기를 늘립니다.
기본 글꼴 크기는 12px입니다. 여기서는 20px로 늘립니다.
<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>이 results rendered 콜백은 '커서'의 페이지 링크를 숫자에서 문자로 변경합니다.
<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>워드 클라우드
results ready 콜백의 명백한 적용은 results rendered 콜백을 사용하여 HTML을 조정하기가 어려운 형식으로 검색 결과를 표시하는 것입니다. results ready 콜백은 빈 div로 시작됩니다.
검색 요소 API 문서의 한 예시에서는 콜백을 사용하여 매우 간단한 버전의 결과를 렌더링하는 방법을 보여주었습니다.
또 다른 예에서는 결과 준비됨 콜백에서 결과 데이터를 보유하고 표준 결과 표시를 꾸미는 데 사용할 수 있는 결과 렌더링됨 콜백에 전달하는 방법을 보여주었습니다.
다음 results ready 콜백은 검색 결과가 결과 목록일 필요가 없음을 보여줍니다. 검색 결과의 일반적인 표시를 결과의 제목과 콘텐츠에서 발견된 단어의 워드 클라우드로 대체합니다. 결과 목록이 사용자에게 중간 단계일 뿐인 경우 이와 같은 콜백은 해당 단계를 우회하고 결과를 사용하여 사용자가 원하는 보고서를 표시할 수 있습니다.
<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>2부 콜백 예
results ready 및 results rendered 콜백을 함께 사용하여 전자의 정보를 후자에게 전달할 수 있습니다. 예를 들어 결과 객체 배열의 정보는 results ready 콜백에서 사용할 수 있지만 results rendered 콜백에서는 사용할 수 없습니다. 결과 준비 콜백의 일부로 해당 정보를 배열에 저장하면 결과 렌더링됨 콜백에서 액세스할 수 있습니다.
한 가지 예로 이미지 결과를 클릭했을 때 표시되는 미리보기 패널을 우회하는 것을 들 수 있습니다. 2부 콜백을 사용하면 클릭 시 이미지 미리보기를 표시하는 대신 이미지 검색 결과가 해당 웹사이트로 직접 연결될 수 있습니다.
<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>