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

Na tej stronie znajdziesz różne przykłady użycia wywołań zwrotnych elementu wyszukiwania. Uzupełniają one przykłady podane w sekcji Wywołania zwrotne dokumentu interfejsu Custom Search Element API.

Przykłady wywołań zwrotnych rozpoczynających wyszukiwanie

Wywołanie zwrotne search starting może zmodyfikować zapytanie, zanim zostanie ono użyte do wyszukiwania. Wyszukiwarkę niestandardową można skonfigurować tak, aby zapytanie zawierało wstępnie określone terminy, ale ta funkcja zwrotna może modyfikować zapytanie na podstawie dowolnych informacji dostępnych dla funkcji zwrotnej.

Poniższe wywołanie zwrotne search starting dodaje do każdego zapytania bieżący dzień tygodnia.

Przykład wywołania zwrotnego rozpoczynającego wyszukiwanie
<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,
    },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Wyświetlanie linków do „Ostatnich wyszukiwań”

Ten przykład pokazuje, jak zaimplementować funkcję Ostatnie wyszukiwania za pomocą wywołania zwrotnego rozpoczęcie wyszukiwania.

Funkcja rejestruje zapytania użytkowników, gdy uruchamiane jest wyszukiwanie, i przechowuje je lokalnie w przeglądarce. Te zapytania są następnie wyświetlane jako elementy, w które można kliknąć, co pozwala użytkownikom szybko powtarzać poprzednie wyszukiwania, zwiększając użyteczność i ograniczając konieczność ponownego wpisywania. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:g9ckaktfipe"></script>

Zdefiniuj funkcję pomocniczą do przechowywania ostatnich wyszukiwań w localStorage, chronioną przez sprawdzenie zgody użytkownika: 

      // 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);
          }
        }

Zarejestruj wywołanie zwrotne rozpoczęcia wyszukiwania. Funkcje zwrotne muszą być zarejestrowane w obiekcie globalnym __gcse przed wczytaniem 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
            },
          },
        };

Zdefiniuj funkcję, która będzie renderować ostatnie wyszukiwania jako elementy, w które można kliknąć, i zainicjuj ją podczas wczytywania strony: 

      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();
      });

W HTML-u umieść te elementy: 

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

Ograniczenia

  • Dane są przechowywane tylko w przeglądarce (localStorage) i wymagają zgody użytkownika.
  • Nie są udostępniane na różnych urządzeniach ani użytkownikom.
  • Usuwane po wyczyszczeniu pamięci przeglądarki.
  • Nie śledzi wyszukiwań przeprowadzanych poza tą stroną.

Przykłady wywołań zwrotnych po wyrenderowaniu wyników

Wywołanie zwrotne renderowania wyników jest przydatne do modyfikowania strony po wypełnieniu jej wynikami. Został on zaprojektowany tak, aby ułatwić modyfikowanie wyświetlania wyników bez konieczności pełnego renderowania wyników przez wywołanie zwrotne.

Poniższe przykłady ilustrują 2 zastosowania wywołania zwrotnego renderowanych wyników, które nie działają na wynikach.

Zidentyfikuj ostatnią stronę wyników

To wywołanie zwrotne results rendered (wyświetlono wyniki) informuje, że wyświetlamy ostatnią stronę 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");
    }
};

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,
  },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Zwiększanie rozmiaru czcionki linków „kursora”

W tym demonstracyjnym wywołaniu zwrotnym results rendered zwiększono rozmiar czcionki numerów „kursora”, które służą do wybierania stron wyników.

Domyślny rozmiar czcionki to 12 pikseli. Zwiększamy ją 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,
  },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Używaj liter w etykietach „Kursora”

Wywołanie zwrotne results rendered zmienia linki do stron w parametrze „cursor” z liczb 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 &lt 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,
  },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Przykłady wywołań zwrotnych po uzyskaniu wyników

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

Ta funkcja zwrotna formatuje wyniki z naprzemiennie jasnym i ciemnym tłem. 

<script async
      src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>

Uwaga: ten kod jest napisany w języku JavaScript/ES6. Będzie działać w większości przeglądarek, ale w przypadku Internet Explorera i kilku innych starszych przeglądarek trzeba będzie go przekonwertować 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,
  },
};

W HTML-u umieść 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 formacie, który byłby trudny do uzyskania za pomocą wywołania zwrotnego results rendered w celu dostosowania kodu HTML. Wywołanie zwrotne results ready zaczyna się od pustego obiektu div. Jeden z przykładów w dokumencie interfejsu Search Element API pokazywał, jak używać wywołania zwrotnego do renderowania bardzo prostej wersji wyników. Inny przykład pokazywał, jak przechowywać dane wyników z wywołania zwrotnego results ready i przekazywać je do wywołania zwrotnego results rendered, gdzie można ich użyć do wzbogacenia standardowego wyświetlania wyników.

Poniższe wywołanie zwrotne results ready pokazuje, że wyniki wyszukiwania nie muszą być listą wyników. Zastępuje normalne wyświetlanie wyników wyszukiwania chmurą słów zawierającą słowa znalezione w tytułach i treściach wyników. Jeśli lista wyników jest tylko etapem pośrednim dla użytkownika, wywołanie zwrotne może pominąć ten etap i użyć wyników do przedstawienia raportu, którego oczekuje użytkownik.

Tworzenie chmury 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. Będzie działać w większości przeglądarek, ale w przypadku Internet Explorera i kilku innych starszych przeglądarek trzeba będzie go przekonwertować 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,
    },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>

Przykład wywołania zwrotnego w 2 częściach

Wywołania zwrotne results ready i results rendered można stosować łącznie, aby przekazywać informacje z pierwszego do drugiego. Na przykład informacje w tablicy obiektów wyników są dostępne w wywołaniu zwrotnym results ready, ale nie w wywołaniu zwrotnym results rendered. Zapisując te informacje w tablicy w ramach wywołania zwrotnego results ready, możemy udostępnić je wywołaniu zwrotnemu results rendered.

Przykładem może być pominięcie panelu podglądu wyświetlanego po kliknięciu wyniku w postaci obrazu. Dzięki wywołaniu zwrotnemu składającemu się z 2 części możemy sprawić, że wyniki wyszukiwania obrazów będą prowadzić bezpośrednio do odpowiednich witryn, a nie wyświetlać podgląd obrazu po kliknięciu.

Pomijanie podglądów 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,
  },
};

W HTML-u umieść te elementy:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>