Altri esempi di callback dell'elemento di ricerca

Questa pagina contiene un assortimento di esempi di utilizzo delle richiamate di Search Element. Integrano le puoi trovare esempi nella sezione Richiamamenti del Documento dell'API Search Element.

Esempi di callback all'avvio della ricerca

Il callback all'avvio della ricerca può modificare la query prima che venga utilizzata per la ricerca. Il Motore di ricerca programmabile può essere configurato per includere termini predeterminati nella query, ma Questo callback può modificare la query in base a qualsiasi informazione disponibile personalizzata.

Il seguente callback di avvio della ricerca decora ogni query con il giorno corrente ogni settimana.

Esempio di callback all'avvio della ricerca 
<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,
    },
};

Includi questi elementi nel codice HTML:

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

Esempi di callback dei risultati visualizzati

Il callback dei risultati visualizzati è utile per modificare la pagina dopo che è stata completata. È progettata per facilitare la modifica della visualizzazione dei risultati senza dover richiamare assumersi la piena responsabilità del rendering dei risultati.

I seguenti esempi illustrano due applicazioni del callback di cui è stato eseguito il rendering dei risultati che non operano sui risultati.

Pagina Identifica gli ultimi risultati

Il callback relativo ai risultati visualizzati nota che è visualizzata l'ultima pagina di risultati e mostra un avviso che ricorda all'utente che ha raggiunto la fine. 

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

Installa il callback 

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

Includi questi elementi nel codice HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
.
. Aumento delle dimensioni del carattere del "cursore" link

Questa demo di callback per i risultati visualizzati aumenta la dimensione del carattere del "cursore" numeri che selezionano pagine di risultati.

La dimensione predefinita dei caratteri è 12 px. In questo caso la aumentiamo a 20 px. 

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

Installa il callback 

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

Includi questi elementi nel codice HTML:

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
.
. Utilizza lettere per "Cursore" Etichette

Questo callback risultati visualizzati cambia i link alla pagina nel "cursore". dai numeri alle lettere. 

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

Installa il callback 

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

Includi questi elementi nel codice HTML:

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

Esempi di callback pronti per i risultati

Mostra i risultati con sfondi a colori alternati

Questo callback formatta i risultati con sfondi chiari e scuri alternati. 

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

Nota: questo codice è scritto in JavaScript/ES6. Verrà eseguito sulla maggior parte dei browser, ma avrà bisogno in JavaScript/ES5 per Internet Explorer e alcune altre applicazioni 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,
  },
};

Includi questi elementi nel codice HTML:

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

Nuvola di parole

L'applicazione ovvia del callback risultati pronti è mostrare i risultati di ricerca in un formato difficile da raggiungere con il callback risultati visualizzati per modificare HTML. Il callback risultati pronti inizia con un div vuoto. Un esempio nel documento sull'API Search Element. ha mostrato come utilizzare il callback per eseguire il rendering di una versione molto semplice dei risultati. Un altro esempio ha mostrato come conservare i dati dei risultati del callback results ready e trasmetterli al il callback risultati visualizzati dove può essere utilizzato per decorare i risultati standard display.

Il seguente callback risultati pronti mostra che i risultati di ricerca non devono necessariamente: un elenco di risultati. Sostituisce la normale visualizzazione dei risultati di ricerca con una nuvola di parole trovate nei risultati" titoli e contenuti. Quando l'elenco "risultati" è solo un passaggio intermedio per l'utente, un callback come questo può bypassare questa fase e utilizzare i risultati per presentare il report desiderato dall'utente.

Crea una cloud di parole dai contenuti dei risultati di ricerca 
<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>

Nota: questo codice è scritto in JavaScript/ES6. Verrà eseguito sulla maggior parte dei browser, ma avrà bisogno convertire in JavaScript/ES5 per Internet Explorer e alcune browser meno recenti. 

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

Includi questi elementi nel codice HTML:

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

Esempio di callback in due parti

I callback risultati pronti e risultati visualizzati possono essere utilizzati in combinazione per trasferire le informazioni dal primo al secondo. Ad esempio, le informazioni nell'array di oggetti risultato sono disponibili per il callback results ready, ma non sul callback results render. Se salvi queste informazioni in un array come parte del callback risultati pronti, possiamo renderle accessibili al callback risultati visualizzati.

Un esempio è la possibilità di ignorare il riquadro di anteprima che viene mostrato quando l'utente fa clic sul risultato di un'immagine. Con un callback in due parti, possiamo fare in modo che i risultati delle immagini rimandino direttamente ai siti web corrispondenti anziché mostrare un'anteprima dell'immagine quando viene fatto clic.

Aggira le anteprime delle immagini 
<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,
  },
};

Includi questi elementi nel codice HTML:

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