Puoi incorporare i componenti del Motore di ricerca programmabile (caselle di ricerca e pagine dei risultati di ricerca) in le tue pagine web e altre applicazioni web utilizzando il markup HTML. Il Motore di ricerca programmabile sono costituiti da componenti il cui rendering viene eseguito in base alle impostazioni il server di ricerca programmabile, insieme alle personalizzazioni che apporti.
Tutto il codice JavaScript viene caricato in modo asincrono, il che consente alla tua pagina web di continuano a caricare mentre il browser recupera il codice JavaScript di Motore di ricerca programmabile.
Introduzione
Questo documento fornisce un modello di base per l'aggiunta di Motore di ricerca programmabile elementi alla tua pagina web, insieme alle spiegazioni del relativo componenti configurabili e API JavaScript flessibile.
Ambito
Questo documento descrive come utilizzare le funzioni e le proprietà specifiche di: l'API Programmable Search Engine Control.
Compatibilità del browser
È possibile trovare l'elenco dei browser supportati da Motore di ricerca programmabile qui
Pubblico
Questa documentazione è destinata agli sviluppatori che vogliono aggiungere prodotti la funzionalità di ricerca nelle pagine.
Elementi di ricerca programmabile
Puoi utilizzare il markup HTML per aggiungere un Elemento di ricerca programmabile alla tua pagina. Ciascuna è costituito da almeno un componente: una casella di ricerca, un blocco di ricerca o entrambi i risultati. La casella di ricerca accetta l'input utente in uno dei seguenti modi:
- Una query di ricerca digitata nel campo di immissione del testo
- Una stringa di query incorporata in un URL
- Esecuzione programmatica
Inoltre, il blocco di risultati di ricerca accetta l'input nei nei seguenti modi:
- Una stringa di query incorporata in un URL
- Esecuzione programmatica
Sono disponibili i seguenti tipi di Elementi di ricerca programmabili:
Tipo di elemento | Componenti | Descrizione |
---|---|---|
standard | <div class="gcse-search"> |
Una casella di ricerca e risultati di ricerca,
visualizzato nello stesso <div> . |
a due colonne | <div class="gcse-searchbox"> e <div class="gcse-searchresults"> |
Un layout a due colonne con i risultati di ricerca su un lato e una casella di ricerca
dall'altro. Se prevedi di inserire più elementi in modalità a due colonne
nella tua pagina web, puoi utilizzare l'attributo gname per accoppiare un
casella di ricerca con un blocco di risultati di ricerca. |
solo casella di ricerca | <div class="gcse-searchbox-only"> |
Una casella di ricerca autonoma. |
searchresults-only | <div class="gcse-searchresults-only"> |
Un blocco autonomo di risultati di ricerca. |
Puoi aggiungere alla tua pagina web il numero desiderato di elementi di ricerca validi, Per due colonne automatica, tutti i componenti necessari (una casella di ricerca e di ricerca) deve essere presente.
Ecco un esempio di elemento di ricerca semplice:
<!-- Put the following javascript before the closing </head> tag and replace 123456 with your own Programmable Search Engine ID. --> <script async src="https://cse.google.com/cse.js?cx=123456"></script> <!-- Place this tag where you want both of the search box and the search results to render --> <div class="gcse-search"></div>
Crea diverse opzioni di layout utilizzando Elementi di ricerca programmabili
Le seguenti opzioni di layout sono disponibili nella pagina Aspetto e design del pannello di controllo di Motore di ricerca programmabile. Di seguito sono riportate alcune linee guida generali sulla composizione delle opzioni di layout utilizzando Elementi di ricerca programmabili. Fai clic sul link per visualizzare una demo di queste opzioni.
Opzione | Componenti |
---|---|
Larghezza intera | <div class="gcse-search"> |
Compatto | <div class="gcse-search"> |
A due colonne | <div class="gcse-searchbox"> , <div class="gcse-searchresults"> |
Due pagine | <div class="gcse-searchbox-only"> nella prima pagina, <div class="gcse-searchresults-only"> (o altri componenti) nella seconda pagina. |
Solo risultati | <div class="gcse-searchresults-only"> |
In hosting su Google | <div class="gcse-searchbox-only"> |
Scopri di più sulle opzioni di layout.
Personalizzazione degli elementi di ricerca programmabile
Per personalizzare i colori, il carattere o lo stile dei link, vai alla pagina Aspetto e design del tuo motore di ricerca programmabile.
Puoi utilizzare attributi facoltativi per sovrascrivere le configurazioni create nel
Motore di ricerca programmabile
pannello di controllo. In questo modo puoi creare un'esperienza di ricerca specifica per la pagina.
Ad esempio, il seguente codice crea una casella di ricerca che apre una pagina dei risultati
(http://www.example.com?search=lady+gaga) in una nuova finestra. Il valore del parametro
L'attributo queryParameterName
, insieme alla stringa di query dell'utente, è
utilizzato per creare l'URL dei risultati.
Tieni presente che l'attributo queryParameterName
è preceduto dal prefisso data-
.
Questo prefisso è obbligatorio per tutti gli attributi.
<div class="gcse-searchbox-only" data-resultsUrl="http://www.example.com" data-newWindow="true" data-queryParameterName="search">
Se hai utilizzato il pannello di controllo di Motore di ricerca programmabile per attivare funzionalità come completamento automatico o perfezionamenti, puoi utilizzare gli attributi per personalizzarle. Eventuali personalizzazioni specificate utilizzando questi attributi le impostazioni configurate nel pannello di controllo verranno sostituite. L'esempio seguente crea un elemento di ricerca a due colonne con le seguenti funzionalità:
- La gestione della cronologia è abilitata
- Il numero massimo di completamenti automatici visualizzati è impostato su 5
- I perfezionamenti vengono visualizzati come link.
<div class="gcse-searchbox" data-enableHistory="true" data-autoCompleteMaxCompletions="5"> <div class="gcse-searchresults" data-refinementStyle="link">
Attributi supportati
Attributo | Tipo | Descrizione | Componente |
---|---|---|---|
Generali | |||
gname |
Stringa | (Facoltativo) Un nome dell'oggetto Elemento di ricerca. Il nome viene utilizzato per recuperare
un componente associato per nome o per accoppiare un searchbox
con un componente searchresults . Se non viene specificato,
Motore di ricerca programmabile genererà automaticamente un gname , in base a
l'ordine dei componenti della pagina web. Ad esempio, il primo
searchbox-only ha il gname "solo casella di ricerca0"
mentre il secondo ha gname "seachbox-only1", e così via.
Tieni presente che il valore gname generato automaticamente per un componente in
il layout a due colonne sarà two-column . Nell'esempio che segue
utilizza il nome gname storesearch per collegare un searchbox
componente con un componente searchresults :
<div class="gcse-searchbox" data-gname="storesearch"></div> <div class="gcse-searchresults" data-gname="storesearch"></div> Quando si recupera un oggetto, se più di un componente ha lo stesso
|
Qualsiasi |
autoSearchOnLoad |
Booleano | Specifica se eseguire una ricerca tramite la query incorporata nell'URL
della pagina in fase di caricamento. Tieni presente che una stringa di query deve essere presente nell'URL
per eseguire la ricerca automatica. Valore predefinito: true . |
Qualsiasi |
enableHistory |
Booleano | Se true , viene attivata la gestione della cronologia per il browser Indietro
e Avanti. Guarda una demo. |
casella di ricerca solo casella di ricerca |
queryParameterName |
Stringa | Il nome del parametro di query, ad esempio q (valore predefinito)
o query . Questo nome verrà incorporato nell'URL (ad esempio,
http://www.example.com?q=lady+gaga). Tieni presente che se specifichi
il nome del parametro di ricerca da solo non attiva la ricerca automatica al caricamento. Una query
deve essere presente nell'URL per eseguire la ricerca automatica. |
Qualsiasi |
resultsUrl |
URL | L'URL della pagina dei risultati. (l'impostazione predefinita è la pagina ospitata da Google). | solo casella di ricerca |
newWindow |
Booleano | Specifica se la pagina dei risultati si apre in una nuova finestra.
Valore predefinito: false . |
solo casella di ricerca |
ivt |
Booleano |
Questo parametro ti consente di specificare un valore booleano per comunicare a Google che vuoi consentire annunci che utilizzano un cookie di solo rilevamento del traffico non valido spazio di archiviazione locale sia per i bucket per il traffico senza consenso.
Valore predefinito: Esempio di utilizzo: |
risultati di ricerca searchresults-only |
mobileLayout |
Stringa |
Specifica se gli stili di layout per dispositivi mobili devono essere utilizzati per i dispositivi mobili.
Valore predefinito: Esempio di utilizzo: |
Qualsiasi |
Completamento automatico | |||
enableAutoComplete |
Booleano | Disponibile solo se il completamento automatico è stato abilitato nel pannello di controllo di Motore di ricerca programmabile.
true attiva il completamento automatico. |
Qualsiasi |
autoCompleteMaxCompletions |
Numero intero | Il numero massimo di completamenti automatici da visualizzare. | casella di ricerca solo casella di ricerca |
autoCompleteMaxPromotions |
Numero intero | Il numero massimo di promozioni da visualizzare nel completamento automatico. | casella di ricerca solo casella di ricerca |
autoCompleteValidLanguages |
Stringa | Elenco separato da virgole di lingue per le quali deve essere disponibile il completamento automatico in un bucket con il controllo delle versioni attivo. Lingue supportate. | casella di ricerca solo casella di ricerca |
Perfezionamenti | |||
defaultToRefinement |
Stringa | Disponibile solo se sono stati creati perfezionamenti in Pannello di controllo di Motore di ricerca programmabile. Specifica l'etichetta di perfezionamento predefinita su display.Nota: questo attributo non è supportato per il layout ospitato su Google. | Qualsiasi |
refinementStyle |
Stringa | I valori accettati sono tab (valore predefinito) e link .
link è supportato solo se la ricerca immagini è disattivata o se
la ricerca immagini è attiva, ma la ricerca web è disabilitata. |
risultati di ricerca searchresults-only |
Ricerca immagini | |||
enableImageSearch |
Booleano | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Se |
risultati di ricerca searchresults-only |
defaultToImageSearch |
Booleano | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Se |
Qualsiasi |
imageSearchLayout |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Specifica il layout della pagina dei risultati di ricerca di immagini. Valori accettabili
sono |
risultati di ricerca searchresults-only |
imageSearchResultSetSize |
Numero intero, stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Specifica la dimensione massima dei risultati di ricerca impostati per la ricerca immagini.
ad esempio |
Qualsiasi |
image_as_filetype |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita i risultati ai file con un'estensione specificata. Le estensioni supportate sono | Qualsiasi |
image_as_oq |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Filtra i risultati di ricerca utilizzando l'operatore logico OR. Esempio di utilizzo se vuoi ottenere risultati di ricerca che includano "term1" o "term2": | Qualsiasi |
image_as_rights |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Filtri basati sulle licenze. I valori supportati sono Visualizza le combinazioni tipiche. | Qualsiasi |
image_as_sitesearch |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita i risultati alle pagine di un sito specifico. Esempio di utilizzo: | Qualsiasi |
image_colortype |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita la ricerca alle immagini in bianco e nero (mono), in scala di grigi o a colori. I valori supportati sono | Qualsiasi |
image_cr |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita i risultati di ricerca ai documenti provenienti da un determinato paese. | Qualsiasi |
image_dominantcolor |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita la ricerca alle immagini di un colore predominante specifico.
I valori supportati sono | Qualsiasi |
image_filter |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Filtro automatico dei risultati di ricerca. Valori supportati: 0/1 Esempio di utilizzo: | Qualsiasi |
image_gl |
Stringa | Disponibile solo se ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile. Migliora i risultati di ricerca il cui paese di origine corrisponde al valore del parametro. | Qualsiasi |
image_size |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Restituisce immagini di una dimensione specificata, dove la dimensione può essere uno dei seguenti: | Qualsiasi |
image_sort_by |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Ordina i risultati utilizzando date o altri contenuti strutturati. Per ordinare per pertinenza utilizza una stringa vuota (image_sort_by=""). Esempio di utilizzo: | Qualsiasi |
image_type |
Stringa | Disponibile solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile.
Limita la ricerca alle immagini di un tipo specifico.
I valori supportati sono | Qualsiasi |
Ricerca web | |||
disableWebSearch |
Booleano | Se true , disattiva la ricerca web. Solitamente utilizzato solo se
ricerca immagini è stata abilitata nel pannello di controllo di Motore di ricerca programmabile. |
risultati di ricerca searchresults-only |
webSearchQueryAddition |
Stringa | Termini aggiuntivi aggiunti alla query di ricerca utilizzando l'operatore logico OR.
Esempio di utilizzo: |
Qualsiasi |
webSearchResultSetSize |
Numero intero, stringa | La dimensione massima dell'insieme di risultati. Si applica a
sia la ricerca immagini che la ricerca web. L'impostazione predefinita dipende dal layout e
se il Motore di ricerca programmabile è configurato per eseguire ricerche in tutto il web o se è stato specificato
siti. I valori accettati includono:
|
Qualsiasi |
webSearchSafesearch |
Stringa |
Specifica se
SafeSearch è
attivata per i risultati di ricerca web. I valori accettati sono off e active .
|
Qualsiasi |
as_filetype |
Stringa | Limita i risultati ai file con un'estensione specificata. Puoi trovare un elenco dei tipi di file indicizzabili da Google nel Centro assistenza Search Console. | Qualsiasi |
as_oq |
Stringa | Filtra i risultati di ricerca utilizzando l'operatore logico OR.
Esempio di utilizzo se vuoi ottenere risultati di ricerca che includano "term1" o "term2": |
Qualsiasi |
as_rights |
Stringa | Filtri basati sulle licenze.
I valori supportati sono Consulta la pagina https://wiki.creativecommons.org/wiki/CC_Search_integration per le combinazioni tipiche. | Qualsiasi |
as_sitesearch |
Stringa | Limita i risultati alle pagine di un sito specifico.
Esempio di utilizzo: |
Qualsiasi |
cr |
Stringa | Limita i risultati di ricerca ai documenti provenienti da un determinato paese.
Esempio di utilizzo: |
Qualsiasi |
filter |
Stringa | Filtro automatico dei risultati di ricerca.
Valori supportati: 0/1 Esempio di utilizzo: |
Qualsiasi |
gl |
Stringa | Migliora i risultati di ricerca il cui paese di origine corrisponde al valore del parametro.
Questa opzione funziona solo in combinazione con l'impostazione Valore lingua. Esempio di utilizzo: |
Qualsiasi |
lr |
Stringa | Limita i risultati di ricerca a documenti scritti in una determinata lingua.
Esempio di utilizzo: |
Qualsiasi |
sort_by |
Stringa | Ordina i risultati utilizzando date o altri contenuti strutturati. Il valore dell'attributo deve essere una delle opzioni fornite nelle impostazioni di ordinamento dei risultati del comando di ricerca programmabile.
Per ordinare per pertinenza utilizza una stringa vuota (sort_by=""). Esempio di utilizzo: |
Qualsiasi |
Risultati di ricerca | |||
enableOrderBy |
Booleano | Consente di ordinare i risultati per pertinenza, data o etichetta. | Qualsiasi |
linkTarget |
Stringa | Imposta la destinazione del link. Valore predefinito: _blank . |
risultati di ricerca searchresults-only |
noResultsString |
Stringa | Specifica il testo predefinito da visualizzare quando nessun risultato corrisponde alla query. La stringa di risultati predefinita può essere utilizzata per visualizzare una stringa localizzata in tutti lingue supportate, mentre quella personalizzata no. | risultati di ricerca searchresults-only |
resultSetSize |
Numero intero, stringa | La dimensione massima dell'insieme di risultati. Ad esempio, large ,
small , filtered_cse e 10 . La
il valore predefinito dipende dal layout e dalla configurazione o meno del motore di ricerca
tutto il web o solo per determinati siti. |
Qualsiasi |
safeSearch |
Stringa | Specifica se
SafeSearch è attivo sia per la ricerca web sia per la ricerca immagini. I valori accettati sono off
e active . |
Qualsiasi |
Callback
I callback supportano il controllo dettagliato dell'inizializzazione degli elementi di ricerca e dei processi di ricerca.
Sono registrati con l'elemento di ricerca JavaScript tramite la __gcse
globale
. L'opzione Registra callback mostra la registrazione di tutti
i callback supportati.
window.__gcse = {
parsetags: 'explicit', // Defaults to 'onload'
initializationCallback: myInitializationCallback,
searchCallbacks: {
image: {
starting: myImageSearchStartingCallback,
ready: myImageResultsReadyCallback,
rendered: myImageResultsRenderedCallback,
},
web: {
starting: myWebSearchStartingCallback,
ready: myWebResultsReadyCallback,
rendered: myWebResultsRenderedCallback,
},
},
};
Il callback di inizializzazione
Il callback di inizializzazione viene richiamato prima che il codice JavaScript dell'elemento di ricerca esegua il rendering della
nel DOM. Se parsetags
è impostato su explicit
in
__gcse
, il codice JavaScript dell'elemento di ricerca lascia il rendering degli elementi di ricerca alla
callback di inizializzazione (come mostrato in Registra callback).
Può essere usato per selezionare gli elementi da visualizzare o per rinviare gli elementi di rendering finché
necessaria. Può anche sostituire gli attributi degli elementi; Ad esempio, può trasformare
casella di ricerca configurata tramite il Pannello di controllo o gli attributi HTML in modo che sia web
eseguire una ricerca in una casella di ricerca di immagini o specificare che le query inviate tramite un modulo di Motore di ricerca programmabile
eseguita in un elemento solo per i risultati di ricerca.
Guarda una demo.
Il ruolo del callback di inizializzazione è controllato dal valore dell'attributo parsetags
proprietà di __gcse
.
- Se il suo valore è
onload
, l'elemento di ricerca JavaScript esegue automaticamente il rendering di tutti gli elementi di ricerca presenti sulla pagina. Il callback di inizializzazione è ancora richiamato, ma non è responsabile del rendering degli elementi di ricerca. - Se il valore è
explicit
, il codice JavaScript dell'elemento di ricerca non viene visualizzato Elementi di ricerca. Il callback può mostrarli in modo selettivo utilizzando Funzionerender()
, oppure eseguire il rendering di tutti gli elementi di ricerca con la funzionego()
Il codice seguente mostra come eseguire il rendering di una casella di ricerca, insieme ai risultati di ricerca, in un
div
, utilizzando il tag di analisi explicit
e il callback di inizializzazione:
Dobbiamo includere un <div>
con un valore ID
in cui vorremmo inserire il codice dell'elemento di ricerca:
<div id="test"></div>
<div>
. Tieni presente che
fa riferimento a test
, il valore id
che abbiamo utilizzato per identificare
<div>
const myInitCallback = function() {
if (document.readyState == 'complete') {
// Document is ready when Search Element is initialized.
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
} else {
// Document is not ready yet, when Search Element is initialized.
google.setOnLoadCallback(function() {
// Render an element with both search box and search results in div with id 'test'.
google.search.cse.element.render(
{
div: "test",
tag: 'search'
});
}, true);
}
};
// Insert it before the Search Element code snippet so the global properties like parsetags and callback
// are available when cse.js runs.
window.__gcse = {
parsetags: 'explicit',
initializationCallback: myInitCallback
};
Includi questo codice HTML per iniziare a caricare l'elemento di ricerca. Sostituisci il valore cx
nel
Clausola src
con il tuo cx
.
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
Cerca callback
Search Element JavaScript supporta sei callback che operano nel parametro flusso di controllo della ricerca. I callback di ricerca vengono forniti in coppia, un callback di ricerca web e un callback di ricerca immagini corrispondente:
- Inizio della ricerca
- Per la ricerca immagini
- Per ricerca web
- Risultati pronti
- Per la ricerca immagini
- Per ricerca web
- Risultati visualizzati
- Per la ricerca immagini
- Per ricerca web
Come il callback di inizializzazione,i callback di ricerca vengono
configurato utilizzando le voci nell'oggetto __gcse
. Ciò accade quando l'elemento di ricerca
JavaScript viene avviato. Le modifiche apportate a __gcse
dopo l'avvio vengono ignorate.
Ciascuno di questi callback viene passato il gName
per
l'elemento di ricerca come argomento.
gname
è utile quando una pagina contiene più di una ricerca. Effettua una ricerca
l'elemento a gname
utilizza l'attributo data-gname
:
<div class="gcse-searchbox" data-gname="storesearch"></div>
Se l'HTML non identifica il gname, il codice JavaScript dell'elemento di ricerca genera un valore che rimangono coerenti finché l'HTML non viene modificato.
Callback di avvio della ricerca tramite immagine/Web
I callback di avvio della ricerca vengono richiamati immediatamente prima delle richieste JavaScript di Search Element i risultati di ricerca dal suo server. Un caso d'uso di esempio è l'uso dell'ora locale del giorno per le modifiche apportate alla query.
searchStartingCallback(gname, query)
gname
- Stringa identificativa dell'elemento di ricerca
query
- valore inserito dall'utente (eventualmente modificato dalla ricerca JavaScript).
Il callback restituisce il valore da utilizzare come query per questa ricerca. Se restituisce un stringa vuota, il valore restituito viene ignorato e il chiamante utilizza la query non modificata.
In alternativa, puoi inserire la funzione di callback nell'oggetto __gcse
o
aggiungi dinamicamente il callback all'oggetto con JavaScript:
window.__gcse['searchCallbacks']['web']['starting'] = function(gname, query) {...};
Esempio di callback di avvio della ricerca
Esempio di ricerca all'avvio del callback in
Esempio di callback all'inizio della ricerca aggiunge morning
o afternoon
alla query a seconda dell'ora del giorno.
const myWebSearchStartingCallback = (gname, query) => {
const hour = new Date().getHours();
return query + (hour < 12 ? ' morning' : ' afternoon');
};
window.myImageSearchStartingCallbackName = myWebSearchStartingCallback;
Installa questo callback in window.__gcse:
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
image: {
starting: 'myImageSearchStartingCallbackName',
},
web: {
starting: myWebSearchStartingCallback,
},
};
<script
async src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Callback pronto per i risultati di ricerca di immagini/Web
Questi callback vengono richiamati immediatamente prima che l'elemento di ricerca JavaScript esegua il rendering delle promozioni e che consentono di analizzare i dati e visualizzare i risultati. Un caso d'uso di esempio è un callback che esegue il rendering delle promozioni e genera uno stile che non può essere specificato con la personalizzazione normale.
resultsReadyCallback(gname, query, promos, results, div)
gname
- Stringa identificativa dell'elemento di ricerca
query
- query che ha prodotto questi risultati
promos
- un array di oggetti di promozione, che corrispondono a promozioni per la query dell'utente. Consulta la definizione dell'oggetto promozione.
results
- un array di oggetti dei risultati. Consulta le definizione dell'oggetto risultato.
div
- Un div HTML posizionato nel DOM in cui l'elemento di ricerca di solito verrebbe fatto
risultati di ricerca e promozioni di luoghi. Normalmente, il codice JavaScript
dell'elemento di ricerca
questo div, ma questo callback potrebbe scegliere di interrompere il rendering automatico dei risultati
e usa questo
div
per visualizzare i risultati stessi. di Gemini Advanced.
Se questo callback restituisce un valore true
, il codice JavaScript dell'elemento di ricerca passa al relativo
lavoro a piè di pagina di pagina.
Callback di risultati di esempio pronto
Il callback resultsReady
di esempio in
Il callback pronto per i risultati di esempio sostituisce la presentazione predefinita
di promozioni e risultati con una sostituzione molto semplice.
const myResultsReadyCallback = function(name, q, promos, results, resultsDiv) {
const makePromoElt = (promo) => {
const anchor = document.createElement('a');
anchor.href = promo['url'];
anchor.target = '_blank';
anchor.classList.add('gs-title');
const span = document.createElement('span');
span.innerHTML = 'Promo: ' + promo['title'];
anchor.appendChild(span);
return anchor;
};
const makeResultParts = (result) => {
const anchor = document.createElement('a');
anchor.href = result['url'];
anchor.target = '_blank';
anchor.classList.add('gs_title');
anchor.appendChild(document.createTextNode(result['visibleUrl']));
const span = document.createElement('span');
span.innerHTML = ' ' + result['title'];
return [anchor, span];
};
const table = document.createElement('table');
if (promos) {
for (const promo of promos) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
cell.appendChild(makePromoElt(promo));
}
resultsDiv.appendChild(table);
resultsDiv.appendChild(document.createElement('br'));
}
if (results) {
const table = document.createElement('table');
for (const result of results) {
const row = table.insertRow(-1);
const cell = row.insertCell(-1);
const [anchor, span] = makeResultParts(result);
cell.appendChild(anchor);
const cell2 = row.insertCell(-1);
cell2.appendChild(span);
}
resultsDiv.appendChild(table);
}
return true;
};
Installa questo callback in window.__gcse:
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: myResultsReadyCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Come con il callback di avvio della ricerca, quello riportato sopra è uno dei molti modi per inserire il callback
__gcse
oggetto.
Callback visualizzato nei risultati della ricerca di immagini/web
Questi callback vengono richiamati immediatamente prima che il codice JavaScript dell'elemento di ricerca esegua il rendering della pagina. piè di pagina. I casi d'uso di esempio includono un callback che aggiunge contenuti dei risultati che la ricerca dell'elemento non viene visualizzato, ad esempio una casella di controllo Salva questo o informazioni non visualizzato automaticamente o un callback che aggiunge pulsanti per ulteriori informazioni.
Se un callback nei risultati di cui è stato eseguito il rendering richiede le informazioni nei promos
e
results
del callback per i risultati pronti, può passare da uno all'altro in questo modo:
callback(gname, query, promoElts, resultElts);
gname
- Stringa identificativa dell'elemento di ricerca
query
- stringa di ricerca.
promoElts
- un array di elementi DOM contenente promozioni.
resultElts
- un array di elementi DOM contenente i risultati.
Non è presente alcun valore restituito.
Callback visualizzato per risultati di esempio
Il callback resultsRendered
di esempio in
Risultati di esempio sottoposti a callback aggiunge un valore Keep fittizio
casella di controllo a ogni promozione e risultato.
myWebResultsRenderedCallback = function(name, q, promos, results) {
for (const div of promos.concat(results)) {
const innerDiv = document.createElement('div');
innerDiv.appendChild(document.createTextNode('Keep: '));
const checkBox = document.createElement('input');
checkBox.type = 'checkbox';
checkBox.name = 'save';
innerDiv.appendChild(checkBox);
div.insertAdjacentElement('afterbegin', innerDiv);
}
};
Installa questo callback in window.__gcse:
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
rendered: 'myWebResultsRenderedCallback',
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:y9tkcjel090"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Se è necessario il callback per i risultati visualizzati
informazioni passate al callback per i risultati pronti, può trasmettere questi dati tra
i callback. L'esempio seguente mostra uno dei molti modi per passare un valore di valutazione da
richSnippet
dal callback per risultati pronti ai risultati visualizzati
il callback.
const makeTwoPartCallback = () => {
let saveForRenderCallback;
const readyCallback = (name, q, promos, results, resultsDiv) =>
{
saveForRenderCallback = [];
for (const result of results) {
const {
richSnippet: {
answer = []
} = {},
} = result;
const firstAnswer = answer[0];
if (firstAnswer) {
const upVotes = firstAnswer['upvotecount'];
if (upVotes) {
saveForRenderCallback.push(
{upvotes: parseInt(upVotes, 10)}
);
continue;
}
}
saveForRenderCallback.push({});
}
};
const renderedCallback = (name, q, promos, results) => {
for (let i = 0; i < results.length; ++i) {
const div = results[i];
const votes = saveForRenderCallback[i]['upvotes'];
if (votes) {
const innerDiv = document.createElement('div');
innerDiv.innerHTML = '<b>Upvotes: ' + votes + '</b>';
div.insertAdjacentElement('afterbegin', innerDiv);
}
}
};
return {readyCallback, renderedCallback};
};
__gcse
:
const {
readyCallback: webResultsReadyCallback,
renderedCallback: webResultsRenderedCallback,
} = makeTwoPartCallback();
window.__gcse || (window.__gcse = {});
window.__gcse.searchCallbacks = {
web: {
ready: webResultsReadyCallback,
rendered: webResultsRenderedCallback,
},
};
<script async
src="https://cse.google.com/cse.js?cx=000888210889775888983:kdroeu4mwju"></script>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
Altri esempi di callback
Puoi trovare altri esempi di callback nel Documento Altri esempi di callback.
Proprietà delle promozioni e dei risultati
Se usi la notazione JSDoc, queste sono le proprietà promotion e result. Qui sono elencate tutte le proprietà che potrebbero essere presenti. La presenza di molte strutture dipendono dai dettagli della promozione o del risultato di ricerca.
{ content: string, image: { height: number, url: string, width: number, }, title: string, url: string, visibleUrl: string, }
{ content: string, contentNoFormatting: string, contextUrl: string, // For image search results only fileFormat: string, image: { // For image search reseults only height: number, url: string, width: number, }, perResultLabels: !Array<{ anchor: string, label: string, labelWithOp: string, }>, richSnippet: !Array<!Object>, // For web search results only thumbnailImage: { height: number, url: string, width: number, }, title: string, titleNoFormatting: string, url: string, visibleUrl: string, }
richSnippet
in results contiene il tipo libero di un array di
di oggetti strutturati. I valori delle voci in questo array sono controllati
dati strutturati
trovati sulla pagina web per ogni risultato di ricerca. Ad esempio, un sito web di recensioni potrebbe includere
dati strutturati che aggiungono questa voce di array a richSnippet
:
'review': { 'ratingstars': '3.0', 'ratingcount': '1024', },
API Programmable Search Element Control (V2)
L'oggetto google.search.cse.element
pubblica quanto segue
funzioni statiche:
Funzione | Descrizione | ||||||
---|---|---|---|---|---|---|---|
.render(componentConfig, opt_componentConfig) |
Visualizza un elemento di ricerca.
Parametri
|
||||||
.go(opt_container) |
Visualizza tutti i tag/classi dell'elemento di ricerca nel contenitore specificato.
Parametri
|
||||||
.getElement(gname) |
Restituisce l'oggetto elemento tramite gname . Se non lo trovi, restituisci un valore nullo.
L'oggetto
Il seguente codice esegue la query "news" nell'elemento di ricerca "element1": var element = google.search.cse.element.getElement('element1'); element.execute('news'); |
||||||
.getAllElements() |
Restituisce una mappa di tutti gli oggetti degli elementi creati correttamente, con chiave gname . |