Wyszukaj przykłady początkowego wywołania zwrotnego
Wywołanie zwrotne rozpoczynające wyszukiwanie może zmodyfikować zapytanie, zanim zostanie ono użyte do wyszukiwania. Wyszukiwarka niestandardowa można skonfigurować tak, aby uwzględniała w zapytaniu wstępnie zdefiniowane hasła, ale to wywołanie zwrotne może modyfikować zapytanie na podstawie wszelkich informacji dostępnych dla funkcji wywołania zwrotnego.
Poniższe wywołanie zwrotne wyszukiwania dekoruje każde zapytanie bieżącym dniem tygodnia.
<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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Wyrenderowane wyniki – przykłady wywołań zwrotnych
Wyrenderowane wywołanie zwrotne to dobry sposób na zmodyfikowanie strony po wypełnieniu wyników. Został on opracowany w taki sposób, aby ułatwić modyfikowanie wyświetlania wyników bez konieczności stosowania wywołania zwrotnego do pełnej odpowiedzialności za ich renderowanie.
Poniższe przykłady obrazują 2 zastosowania wyrenderowanych wyników wywołania zwrotnego, które nie działają na tych wynikach.
To wyrenderowane wywołanie zwrotne informuje, że wyświetla się ostatnia strona wyników i wyświetla alert z informacją o dotarciu do końca.
<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");
}
};
Instalowanie wywołania zwrotnego
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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Ta wersja demonstracyjna wyrenderowanych wywołań zwrotnych zwiększa rozmiar czcionki w numerach „kursora”, które służą do wybierania stron z wynikami.
Domyślny rozmiar czcionki to 12 pikseli. Tutaj zwiększamy go do 20 pikseli.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};
Instalowanie wywołania zwrotnego
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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
To wyrenderowane wyniki wywołania zwrotnego zmienia linki do stron w „kursorze” z cyfr na litery.
<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];
}
};
Instalowanie wywołania zwrotnego
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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Przykłady gotowych wywołań zwrotnych wyników
Ten format wywołania zwrotnego ma na zmianę jasne i ciemne tło.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
Uwaga: ten kod został napisany w języku JavaScript/ES6. Będzie on działać w większości przeglądarek, ale w przypadku Internet Explorera i kilku innych starszych przeglądarek konieczne będzie jego przekonwertowanie na 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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Chmura słów
Oczywistym zastosowaniem wywołania zwrotnego gotowych wyników jest wyświetlanie wyników wyszukiwania w formacie, który byłby trudny do uzyskania przy użyciu wywołania zwrotnego wyrenderowanych wyników do dostosowania kodu HTML. Wywołanie zwrotne results ready rozpoczyna się od pustego pola div
.
Jeden z przykładów w dokumencie Search Element API pokazuje, jak użyć wywołania zwrotnego do renderowania bardzo prostej wersji wyników.
Inny przykład pokazał, jak przechowywać dane o wynikach z wywołania zwrotnego gotowych wyników i przekazywać je do wywołania zwrotnego wyrenderowanych wyników, gdzie można ich używać do dekorowania standardowego panelu wyników.
Widoczne poniżej wywołanie zwrotne dotyczące gotowych wyników wskazuje, że wyniki wyszukiwania nie muszą być listą wyników. Zastępuje one normalne wyświetlanie wyników wyszukiwania chmurą słów znalezionych w tytułach i treściach wyników. Gdy lista wyników jest dla użytkownika tylko etapem pośrednim, takie wywołanie zwrotne może pominąć ten etap i wykorzystać wyniki do przedstawienia użytkownikowi oczekiwanego raportu.
<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>
Uwaga: ten kod został napisany w języku JavaScript/ES6. Będzie on działać w większości przeglądarek, ale w przypadku Internet Explorera i kilku innych starszych przeglądarek trzeba będzie przekonwertować go na 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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Przykład dwuczęściowego wywołania zwrotnego
Wywołania zwrotne gotowe i wyrenderowane mogą być używane w połączeniu do przekazywania informacji z pierwszego do drugiego. Na przykład informacje w tablicy obiektów wyników są dostępne dla wywołania zwrotnego results ready, ale nie dla wywołania zwrotnego wyrenderowanych wyników. Zapisując te informacje w tablicy w ramach wywołania zwrotnego gotowych wyników, możemy udostępnić je wywołaniu zwrotnemu wyrenderowanych wyników.
Przykładem może być pominięcie panelu podglądu wyświetlanego po kliknięciu wyniku z obrazem. Dzięki dwuczęściowemu wywołaniu zwrotnym wyniki wyszukiwania grafiki mogą kierować bezpośrednio do odpowiednich witryn, zamiast wyświetlać podgląd obrazu po kliknięciu.
<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,
},
};
Uwzględnij w kodzie HTML te elementy:
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>