Примеры начальных обратных вызовов поиска
Функция обратного вызова, запускающая поиск, может изменять запрос до того, как он будет использован для поиска. Программируемый поисковый движок может быть настроен на включение предопределенных терминов в запрос, но эта функция обратного вызова может изменять запрос на основе любой информации, доступной функции обратного вызова.
Следующая функция обратного вызова, запускающая поиск, добавляет к каждому запросу текущий день недели.
<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);
}
}
Зарегистрируйте функцию обратного вызова, запускающую поиск . Функции обратного вызова должны быть зарегистрированы в глобальном объекте __gcse до загрузки cse.js :
// 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) и требуют согласия пользователя. - Информация не передается между устройствами или пользователями.
- Сбрасывается, если очищается память браузера.
- Поисковые запросы, выполненные за пределами этой страницы, не отслеживаются.
Примеры обратных вызовов для отображения результатов
Функция обратного вызова `results rendered` удобна для изменения страницы после того, как она заполнена результатами. Она предназначена для упрощения изменения отображения результатов без необходимости полной ответственности за их отрисовку со стороны функции обратного вызова.
Следующие примеры иллюстрируют два варианта использования функции обратного вызова для отображения результатов, которые не работают с самими результатами.
В результате выполнения этой операции возвращается сообщение об ошибке, указывающее на отображение последней страницы результатов, и появляется всплывающее окно, напоминающее пользователю о том, что он достиг конца.
<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>Облако слов
Очевидное применение функции обратного вызова `results ready` — отображение результатов поиска в формате, который сложно получить, используя функцию обратного вызова ` results rendered` для изменения HTML-кода. Функция обратного вызова ` results ready` начинается с пустого div . В одном из примеров в документации по API элемента поиска показано, как использовать функцию обратного вызова для отображения очень простой версии результатов. В другом примере показано, как сохранить данные результатов из функции обратного вызова `results ready` и передать их в функцию обратного вызова ` results rendered`, где их можно использовать для оформления стандартного отображения результатов.
Следующий коллбэк готовности результатов показывает, что результаты поиска не обязательно должны быть списком. Он заменяет обычное отображение результатов поиска облаком слов, найденных в заголовках и содержимом результатов. Если список результатов является лишь промежуточным этапом для пользователя, подобный коллбэк может обойти этот этап и использовать результаты для представления отчета, который нужен пользователю.
<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>Пример двухкомпонентного обратного вызова
Функции обратного вызова " Результаты готовы" и "Результаты отображены" можно использовать совместно для передачи информации из первой во вторую. Например, информация в массиве объектов результатов доступна для функции обратного вызова " Результаты готовы" , но не для функции обратного вызова " Результаты отображены ". Сохранив эту информацию в массив в рамках функции обратного вызова " Результаты готовы", мы можем сделать ее доступной для функции обратного вызова " Результаты отображены" .
Один из примеров — обход панели предварительного просмотра, отображаемой при нажатии на результат поиска изображения. С помощью двухкомпонентной функции обратного вызова мы можем сделать так, чтобы результаты поиска изображений напрямую ссылались на соответствующие веб-сайты, а не отображали предварительный просмотр изображения при нажатии.
<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>