Więcej przykładów wywołań zwrotnych elementu wyszukiwania

Ta strona zawiera zbiór przykładów użycia wywołań zwrotnych elementu wyszukiwania. Uzupełniają one które można znaleźć w sekcji Wywołania zwrotne zbioru danych niestandardowych Dokument interfejsu Search Element API.

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.

Szukaj przykładowego wywołania zwrotnego 
<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.

Identyfikacja ostatniej strony wyników

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>
. Zwiększenie rozmiaru czcionki „kursora” linki

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>
. Użyj liter jako „kursora” Etykiety

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 &lt 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

Wyświetlanie wyników z tłem w naprzemiennych kolorach

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.

Utwórz chmurę słów na podstawie treści wyników wyszukiwania 
<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.

Pomijanie podglądu obrazów 
<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>