Weitere Beispiele für Callback-Funktion für Suchelemente

Diese Seite enthält eine Reihe von Beispielen für die Verwendung von Callbacks für Suchelemente. Sie ergänzen die Beispiele im Abschnitt „Callbacks“ im Dokument zur Custom Search Element API.

Beispiele für einen Rückruf beim Starten der Suche

Der Callback Suche beginnt kann die Abfrage ändern, bevor sie für die Suche verwendet wird. Die Programmable Search Engine kann so konfiguriert werden, dass die Abfrage vordefinierte Begriffe enthält. Durch diesen Callback kann die Abfrage jedoch basierend auf den für die Callback-Funktion verfügbaren Informationen geändert werden.

Der folgende Callback Suche starten dekoriert jede Abfrage mit dem aktuellen Wochentag.

Beispiel für einen Callback zum Starten der Suche 
<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,
    },
};

Fügen Sie folgende Elemente in den HTML-Code ein:

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

Callback-Beispiele für gerenderte Ergebnisse

Der zurückgegebene Callback für die Ergebnisse eignet sich gut, um die Seite zu ändern, nachdem sie mit Ergebnissen gefüllt wurde. Sie ist so konzipiert, dass sich die Anzeige der Ergebnisse auf einfache Weise ändern lässt, ohne dass der Callback die volle Verantwortung für das Rendern der Ergebnisse übernimmt.

Die folgenden Beispiele zeigen zwei Anwendungen des gerenderten Callbacks für Ergebnisse, die nicht auf die Ergebnisse angewendet werden.

Letzte Suchergebnisseite identifizieren

Dieser Callback für ausgegebene Ergebnisse erkennt, dass die letzte Ergebnisseite angezeigt wird, und blendet eine Benachrichtigung ein, die den Nutzer daran erinnert, dass er das Ende erreicht hat. 

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

Callback installieren 

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

Fügen Sie folgende Elemente in den HTML-Code ein:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Schrift von Cursor-Links vergrößern

Diese Callback-Demo für ausgegebene Ergebnisse vergrößert die Schriftgröße der Cursor-Zahlen, mit denen Seiten mit Ergebnissen ausgewählt werden.

Die Standardschriftgröße ist 12 Pixel. Hier erhöhen wir sie auf 20 Pixel. 

<script async
  src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
myWebResultsRenderedCallback = function(){
   document.getElementsByClassName("gsc-cursor")[0].style.fontSize = '20px';
};

Callback installieren 

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

Fügen Sie folgende Elemente in den HTML-Code ein:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Buchstaben für „Cursor“-Labels verwenden

Durch diesen Callback werden die Seitenlinks im Cursor von Ziffern in Buchstaben geändert. 

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

Callback installieren 

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

Fügen Sie folgende Elemente in den HTML-Code ein:

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

Beispiele für Callback zu Ergebnissen, die bereit sind

Ergebnisse mit abwechselnden Hintergründen anzeigen

Bei diesem Callback werden helle und dunkle Hintergründe abwechselnd formatiert. 

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

Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Er lässt sich in den meisten Browsern ausführen, für Internet Explorer und einige andere ältere Browser muss er jedoch in JavaScript/ES5 konvertiert werden. 

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

Fügen Sie folgende Elemente in den HTML-Code ein:

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

Wortwolke

Die naheliegendste Anwendung des Callbacks results ready besteht darin, Suchergebnisse in einem Format anzuzeigen, das schwer zu erreichen wäre, indem der HTML-Code mit dem Callback results rendern optimiert wird. Der Callback results ready beginnt mit einem leeren div. Ein Beispiel im Dokument zur Search Element API zeigte, wie mithilfe des Callbacks eine sehr einfache Version der Ergebnisse gerendert werden kann. In einem weiteren Beispiel wurde gezeigt, wie die Ergebnisdaten aus dem Callback results ready gespeichert und an den Callback Ergebnisse gerendert übergeben werden können, wo sie zum Dekorieren der Standardergebnisanzeige verwendet werden können.

Der folgende Callback results ready zeigt, dass die Suchergebnisse keine Ergebnisliste sein müssen. Sie ersetzt die normale Anzeige der Suchergebnisse durch eine Wortwolke aus Wörtern, die im Titel und Inhalt der Ergebnisse gefunden wurden. Wenn die Ergebnisliste für den Nutzer nur ein Zwischenschritt ist, kann ein Callback wie dieser diese Phase umgehen und die Ergebnisse verwenden, um den vom Nutzer gewünschten Bericht zu präsentieren.

Wortwolke aus den Suchergebnissen erstellen 
<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>

Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Er lässt sich in den meisten Browsern ausführen, muss aber für Internet Explorer und einige andere ältere Browser in JavaScript/ES5 konvertiert werden. 

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

Fügen Sie folgende Elemente in den HTML-Code ein:

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

Beispiel für einen zweiteiligen Callback

Die Callbacks results ready und results Rendering können in Kombination verwendet werden, um Informationen von der ersten an die zweite zu übergeben. Beispielsweise sind die Informationen im Array der Ergebnisobjekte für den Callback results ready verfügbar, nicht jedoch für results render-Callback. Durch das Speichern dieser Informationen in einem Array als Teil des Callbacks results ready können wir sie für den Callback results ready zugänglich machen.

Ein Beispiel dafür ist, den Vorschaubereich zu umgehen, der angezeigt wird, wenn auf ein Bildergebnis geklickt wird. Mit einem zweiteiligen Callback können wir die Bildergebnisse direkt mit den entsprechenden Websites verknüpfen, anstatt beim Anklicken eine Bildvorschau anzuzeigen.

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

Fügen Sie folgende Elemente in den HTML-Code ein:

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