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

Na tej stronie znajdziesz wiele przykładów użycia wywołań zwrotnych elementu wyszukiwania. Uzupełniają one przykłady z sekcji wywołań zwrotnych dokumentu dotyczącego interfejsu Custom Search Element API.

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.

Przykład rozpoczynającego się wywołania zwrotnego z wyszukiwarki 
<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.

Zidentyfikuj ostatnią stronę wyników

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>
Zwiększenie rozmiaru czcionki linków „kursor”

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>
W przypadku etykiet „Kursor” stosuj litery

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

Wyświetlaj wyniki z tłem o zmiennych kolorach

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.

Utwórz chmurę słów z 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 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.

Pomijaj podgląd 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>