Il widget di ricerca di Knowledge Graph è un modulo JavaScript che ti consente di aggiungere argomenti nelle caselle di immissione sul tuo sito. Gli utenti iniziano a digitare il testo e il widget trova corrispondenze pertinenti durante la digitazione con l'API Knowledge Graph Search.
Funzionalità
- Cross browser: è scritto con una tecnologia Closure ben testata e tra browser ed è compilato in JavaScript puro.
- interdominio. Grazie a JSONP, non sono necessari server proxy.
- Ospitato sui server di Google.
- Senza costi! Si applicano i Termini standard dell'API di Google.
Perché utilizzare il widget di ricerca di Knowledge Graph?
- Consenti agli utenti di digitare meno testo per inserire più dati.
- Rendi l'inserimento dei dati più semplice e preciso.
- Fornisci immagini e descrizioni per ridurre il carico cognitivo sugli utenti.
- Evita nomi duplicati per la stessa entità: Puff Daddy, P. Diddy, Sean Combs fanno tutti riferimento a
/en/sean_combs.
Aggiunta del widget di ricerca di Knowledge Graph al tuo sito web
Per aggiungere il widget Ricerca di Knowledge Graph a una pagina, includi il seguente codice nella sorgente del tuo sito web. Devi utilizzare una chiave API affinché il widget possa accedere all'API Google Knowledge Graph.
Codice da includere nel tuo sito web
Includi quanto segue nel <head> del documento HTML:
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.css">
<style>
.kge-search-picker {
width: <DROPDOWN_MENU_WIDTH>;
}
</style>
<script type="text/javascript" src="https://www.gstatic.com/knowledge/kgsearch/widget/1.0/widget.min.js"></script>
Poi, nel documento <body>, utilizza un campo di immissione con un ID corrispondente, come questo:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Recupero e utilizzo di una chiave API
La richiesta di una chiave API consente alla tua applicazione di effettuare richieste Suggest. Senza una chiave API, il widget non funziona. Se non hai ancora una chiave API, segui le istruzioni nella pagina Prerequisiti per ottenerne una.
Dopo aver ottenuto una chiave, passala al widget di ricerca di Knowledge Graph utilizzando un codice simile al seguente:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Configurazione del widget di ricerca
JavaScript può chiamare KGSearchWidget() con un terzo argomento vuoto, come mostrato sopra. Oppure puoi usare questo terzo argomento per passare un oggetto
di configurazione, specificando vari filtri, vincoli e gestori di eventi.
Passaggio di un oggetto di configurazione
Il widget Ricerca di Knowledge Graph accetta un parametro di configurazione facoltativo. Ciò consente di completare una struttura di dati con più opzioni di configurazione e di passarla al widget come mostrato nell'esempio seguente.
var config = {
'limit': 10,
'languages': ['en', 'fr'],
'types': ['Person', 'Movie'],
'maxDescChars': 100,
};
config['selectHandler'] = function(e) {
alert(e.row.name + ' selected');
};
config['highlightHandler'] = function(e) {
alert(e.row.name + ' highlighted');
};
KGSearchWidget(<API_KEY>, document.getElementById('myInput'), config);
Opzioni di configurazione
La tabella seguente descrive le opzioni di configurazione che puoi passare al widget di ricerca di Knowledge Graph.
| Nome | Tipo | Predefinito | Descrizione |
|---|---|---|---|
| lingue | Array(stringa) | Inglese |
Un elenco di codici lingua (definiti nella norma ISO 639-1) che determina l'esecuzione della ricerca in tutte le lingue specificate. I risultati vengono ordinati nella prima lingua elencata e vengono visualizzati nella prima lingua dell'elenco che ha un nome per l'entità. L'inglese è quello con la maggior parte delle notizie. Questo valore viene trasmesso in modo trasparente all'API Search. Ad esempio, se le lingue sono impostate su [fr, en] |
| limite | Numero intero | 20 | Numero massimo di risultati nel menu a discesa. |
| types | Array(stringa) | Tutti i tipi | Restituisci solo le entità che corrispondono a uno dei tipi di entità forniti. Se questo parametro viene omesso, restituisce corrispondenze di qualsiasi tipo di entità. |
| maxDescChars | Numero intero | Schermi illimitati | Il numero massimo di caratteri nella descrizione dettagliata di ciascuna entità. I contenuti più lunghi di maxDescChars verranno troncati. |
| selectHandler | Funzione | null |
La funzione di callback da chiamare quando viene selezionata una riga. L'argomento della
funzione di callback è un evento e include un attributo row
contenente informazioni sulla riga selezionata. Consulta l'articolo sull'utilizzo dei gestori di eventi per un esempio di utilizzo di questo callback.
|
| highlightHandler | Funzione | null |
La funzione di callback che viene richiamata quando l'utente passa il mouse sopra la riga.
L'argomento della funzione di callback è un evento e include un
attributo row contenente informazioni sulla riga selezionata.
Tieni presente che molti dispositivi (come l'hardware mobile touchscreen) non possono generare questo evento. Consulta l'articolo sull'utilizzo dei gestori di eventi per un esempio sull'utilizzo di questo callback. |
Implementazione dei gestori di eventi
Il widget di ricerca di Knowledge Graph attiva i seguenti eventi nel contesto dell'input con cui viene inizializzato. Puoi fornire funzioni di callback nell'oggetto config per implementare i gestori per questi eventi.
selectHandler: questo evento viene attivato quando un utente seleziona un elemento dall'elenco dei suggerimenti. L'evento è accompagnato da un oggetto dati in cui event.row rappresenta i dati della riga selezionata.
event.row.name e event.row.id rappresentano il nome e
l'ID dell'elemento selezionato. Il seguente frammento di codice mostra come testare cosa fa selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler: questo evento viene attivato quando un elemento viene messo in evidenza dall'utente che vi passa sopra il mouse. Il seguente snippet mostra come verificare cosa fa highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Guida e feedback
Per eventuali domande, segnalazioni di bug o feedback sull'API Knowledge Graph Search, utilizza il forum di assistenza.