Wyszukaj przykłady rozpoczynania oddzwaniania
Wywołanie zwrotne początku wyszukiwania może zmodyfikować zapytanie, zanim zostanie ono użyte do wyszukiwania. Wyszukiwarkę niestandardową można skonfigurować tak, aby uwzględniała w zapytaniu określone z góry hasła, ale to wywołanie zwrotne może zmodyfikować zapytanie na podstawie wszelkich informacji dostępnych dla wywołania zwrotnego .
Wywołanie zwrotne rozpoczynające wyszukiwanie oznacza, że każde zapytanie zawiera bieżący dzień. 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>Przykłady wywołań zwrotnych renderowanych wyników
Wywołanie zwrotne z wyrenderowanymi wynikami to dobry sposób na modyfikowanie strony po zapełnieniu jej wynikami. Ułatwia modyfikowanie wyświetlania wyników bez konieczności wywołania zwrotnego aby wziąć pełną odpowiedzialność za renderowanie wyników.
Poniższe przykłady ilustrują 2 zastosowania wyników renderowanych wywołania zwrotnego, które nie działają na wynikach.
To wyrenderowanie wywołania zwrotnego zauważa, że wyświetlana jest ostatnia strona wyników i wyświetla alert przypominający użytkownikowi, że dotarł 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");
}
};Zainstaluj wywołanie zwrotne
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 demonstracja o wyrenderowaniu wywołania zwrotnego zwiększa rozmiar czcionki „kursor” wybierając strony wyników.
Domyślny rozmiar czcionki to 12 pikseli. 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';
};Zainstaluj wywołanie zwrotne
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 wywołanie zwrotne wyrenderowane zmienia linki do stron w „kursie” od cyfr do liter.
<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];
}
};Zainstaluj wywołanie zwrotne
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 wywołań zwrotnych gotowych wyników
Ten format wywołania zwrotnego powoduje naprzemienne jasne i ciemne tło.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>Uwaga: ten kod jest napisany w języku JavaScript/ES6. Działa w większości przeglądarek, ale wymaga do przekonwertowania na JavaScript/ES5 dla Internet Explorera i kilku innych starszych wersji przeglądarki.
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 results ready jest wyświetlanie wyników wyszukiwania w
format, do którego trudno byłoby uzyskać dostęp za pomocą wywołania zwrotnego results renderowanego.
HTML. Wywołanie zwrotne results ready (Gotowe wyniki) zaczyna się od pustego div.
Przykład w dokumencie Search Element API
pokazaliśmy, jak używać wywołania zwrotnego do renderowania bardzo prostej wersji wyników.
Inny przykład
pokazaliśmy, jak przechowywać dane o wynikach z wyników gotowe i przekazywać je do
wywołania zwrotnego wyrenderowanego, które może służyć do dekorowania standardowych wyników.
wyświetlacz.
Podane niżej wywołanie zwrotne typu wyniki gotowe pokazuje, że wyniki wyszukiwania nie muszą nie musi mieć postaci listy wyników. Zastępuje zwykłe wyświetlanie wyników wyszukiwania z chmurą słów znalezionych w wynikach tytuły i treści. Gdy na liście to tylko krok pośredni dla użytkownika, takie wywołanie zwrotne może pominąć ten etap i wykorzystać wyniki do przedstawienia raportu, o który prosi użytkownik.
<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 jest napisany w języku JavaScript/ES6. Działa w większości przeglądarek, ale wymaga do przekonwertowania na JavaScript/ES5 dla Internet Explorera i kilku innych starszych przeglądarek.
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 wyniki i Wyrenderowane wyniki mogą być używane 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 (gotowe wyniki), ale nie wyrenderowania wyników. Zapisując te informacje w tablicy jako część wywołania zwrotnego results ready (Gotowe wyniki), możemy udostępnić je wyrenderowanym wynikom wywołaniom zwrotnym.
Przykładem może być ominięcie panelu podglądu wyświetlanego po kliknięciu wyniku wyszukiwania obrazu. Dzięki dwuczęściowemu wywołaniu zwrotnemu wyniki wyszukiwania grafiki mogą zawierać bezpośredni link do odpowiednich witryn, zamiast wyświetlać po kliknięciu podgląd obrazu.
<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>