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

Diese Seite enthält eine Reihe von Beispielen für die Verwendung von Search Element-Callbacks. Sie ergänzen die Beispiele im Abschnitt "Callbacks" (Rückrufe) der benutzerdefinierten Search Element API-Dokument.

Beispiele für das Starten von Callbacks suchen

Mit dem Callback Suche starten kann die Abfrage geändert werden, bevor sie für die Suche verwendet wird. Die Programmable Search Engine kann so konfiguriert werden, dass vordefinierte Begriffe in der Suchanfrage enthalten sind. kann dieser Callback die Anfrage basierend auf allen Informationen ändern, die ihm zur Verfügung stehen .

Der folgende Callback search beginnt schmückt jede Abfrage mit dem aktuellen Tag. der Woche.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Beispiel für einen Callback beim 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 die folgenden Elemente in den HTML-Code ein:

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

Beispiele für gerenderte Ergebnisse des Callbacks

Der ergebnisgerenderte Callback eignet sich gut, um die Seite zu ändern, nachdem sie mit Ergebnissen gefüllt wurde. Sie ist so konzipiert, dass die Anzeige der Ergebnisse leicht geändert werden kann, ohne dass ein Callback erforderlich ist. die volle Verantwortung für das Rendering der Ergebnisse zu übernehmen.

Die folgenden Beispiele zeigen zwei Anwendungen des Callbacks für den gerenderten Ergebniswert, der nicht auf die Ergebnisse auswirken.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Letzte Ergebnisseite identifizieren

Dieser gerenderte Ergebnis-Callback weist darauf hin, dass die letzte Seite angezeigt wird. der Ergebnisse. Außerdem wird eine Benachrichtigung angezeigt, die den Nutzer daran erinnert, dass er das Ziel 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 die folgenden Elemente in den HTML-Code ein:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> Schriftgröße des Cursors vergrößern Links

In dieser Callback-Demo für das gerenderte Ergebnis wird die Schriftgröße des "Cursor" die Seiten mit Ergebnissen auswählen.

Die Standardschriftgröße ist 12 Pixel. Hier erhöhen wir es 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 die folgenden Elemente in den HTML-Code ein:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<ph type="x-smartling-placeholder">
</ph> Buchstaben als „Cursor“ verwenden Labels

Durch diesen Callback gerenderte Ergebnisse werden die Seitenlinks im "Cursor" geändert. von Zahlen in Buchstaben. 

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

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 die folgenden Elemente in den HTML-Code ein:

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

Beispiele für ergebnisbereite Callbacks

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Ergebnisse mit abwechselnden farbigen Hintergründen anzeigen

Dieser Callback formatiert Ergebnisse mit abwechselnden hellen und dunklen Hintergründen. 

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

Hinweis: Dieser Code ist in JavaScript/ES6 geschrieben. Er funktioniert in den meisten Browsern, in JavaScript/ES5 für Internet Explorer und einige andere ältere Versionen Browser. 

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 die folgenden Elemente in den HTML-Code ein:

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

Wortwolke

Die offensichtliche Anwendung des Callbacks results ready besteht darin, Suchergebnisse in ein Format, das mit dem Callback results gerendert zur Optimierung des HTML: Der Callback results ready beginnt mit einem leeren div. Ein Beispiel im Dokument Search Element API zeigte, wie mithilfe des Callbacks eine sehr einfache Version der Ergebnisse gerendert werden kann. Anderes Beispiel gezeigt, wie die Ergebnisdaten aus dem Callback results ready gespeichert und an Den Callback results gerendert, mit dem er die Standardergebnisse dekorieren kann Display.

Der folgende results ready-Callback zeigt, dass die Suchergebnisse dies nicht tun müssen. eine Liste von Ergebnissen sein. Es ersetzt die normale Anzeige der Suchergebnisse. mit einer Wortwolke aus den in den Ergebnissen gefundenen Wörtern Titel und Inhalte. Wenn die Liste der ist für den Nutzer nur ein Zwischenschritt. Ein solcher Rückruf kann diese Phase umgehen. und nutzen die Ergebnisse, um den gewünschten Bericht zu präsentieren.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> Eine Wortwolke aus 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 funktioniert in den meisten Browsern, in JavaScript/ES5 für Internet Explorer und einige andere mit älteren Browsern. 

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 die folgenden 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 gerendert können in Kombination verwendet werden, um Informationen von der ersten an die letztere zu übergeben. Beispielsweise sind die Informationen im Array der Ergebnisobjekte für den Callback results ready verfügbar, nicht aber results gerendert. Indem Sie diese Informationen als Teil des results ready-Callbacks in einem Array speichern, können wir sie dem results gerendert-Callback zugänglich machen.

Ein Beispiel hierfü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.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> 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 die folgenden Elemente in den HTML-Code ein:

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