Le widget Recherche Knowledge Graph est un module JavaScript qui vous aide à ajouter aux zones de saisie de votre site. Les utilisateurs commencent à saisir du texte et le widget trouve des correspondances pertinentes lors de la saisie, à l'aide de l'API Knowledge Graph Search.
Fonctionnalités
- Multi-navigateurs : il est écrit dans une closure multi-navigateurs bien éprouvée et compilé en JavaScript pur.
- Plusieurs domaines. Grâce au JSONP, aucun serveur proxy n'est nécessaire.
- Hébergé sur les serveurs Google.
- Gratuit ! (Les Conditions standards des API Google s'appliquent.)
Pourquoi utiliser le widget Knowledge Graph Search ?
- Laissez à vos utilisateurs la possibilité de saisir plus de données.
- Simplifiez la saisie des données et améliorez leur précision.
- Réduisez la charge cognitive de vos utilisateurs en fournissant des images et des descriptions.
- Évitez les noms en double pour une même entité: Puff Daddy, P. Diddy et Sean Combs font tous référence à
/en/sean_combs.
Ajouter le widget Knowledge Graph Search à votre site Web
Pour ajouter le widget Knowledge Graph Search à une page, incluez les éléments suivants : dans le code source de votre site Web. Vous devez utiliser un Clé API afin que le widget puisse accéder à l'API Google Knowledge Graph.
Code à inclure dans votre site Web
Incluez les éléments suivants dans le champ <head> de votre document 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>
Ensuite, dans le fichier <body> de votre document, utilisez un champ de saisie avec une
de mise en correspondance, comme ceci:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Obtenir et utiliser une clé API
L'obtention d'une clé API permet à votre application d'envoyer des requêtes de suggestion. Sans une clé API, le widget ne fonctionnera pas. Si vous ne possédez pas encore de clé API, suivez les instructions du Page Conditions préalables pour en obtenir un.
Une fois la clé obtenue, transmettez-la au widget de recherche Knowledge Graph à l'aide de comme suit:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Configurer le widget Recherche
Votre code JavaScript peut appeler KGSearchWidget() avec un troisième argument vide, en tant que
comme indiqué ci-dessus. Vous pouvez également utiliser ce troisième argument pour transmettre une valeur
spécifiant différents filtres, contraintes et gestionnaires d'événements.
Transmettre un objet de configuration
Le widget de recherche Knowledge Graph accepte un paramètre de configuration facultatif. Cela vous permet de remplir une structure de données avec plusieurs options de configuration, et la transmettre au widget, comme illustré dans l'exemple suivant.
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);
Options de configuration
Le tableau suivant décrit les options de configuration que vous pouvez transmettre à le widget de recherche Knowledge Graph.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| langues | Tableau(chaîne) | Anglais |
Une liste des codes de langue
(définis dans la norme ISO 639-1), qui permettent d'effectuer la recherche dans toutes les langues.
spécifié. Les résultats sont classés dans la première langue indiquée et
affiché dans la première langue de la liste dont le nom est
entité. L'anglais est celui qui est le plus couvert. Cette valeur est indiquée de façon transparente
transmis à l'API Search. Par exemple, si les langues sont définies sur [fr, en] |
| limite | Entier | 20 | Nombre maximal de résultats dans le menu déroulant. |
| Types | Tableau(chaîne) | Tous les types | Ne renvoie que les entités qui correspondent à l'un des éléments entity différents types d'appareil. Si ce paramètre est omis, renvoie des correspondances de n'importe quel type d'entité. |
| maxDescChars | Entier | Illimité | Nombre maximal de caractères dans la description détaillée de chaque entité. Les contenus dont la longueur dépasse la valeur maxDescChars seront tronqués. |
| selectHandler | Fonction | null |
Fonction de rappel à appeler lorsqu'une ligne est sélectionnée. L'argument de la fonction
une fonction de rappel est un événement et inclut un attribut row
contenant des informations sur la ligne sélectionnée. Voir
Utiliser des gestionnaires d'événements
pour obtenir un exemple d'utilisation de ce rappel.
|
| highlightHandler | Fonction | null |
Fonction de rappel appelée lorsque l'utilisateur pointe sur la ligne.
L'argument de la fonction de rappel est un événement et inclut une
L'attribut row contenant des informations sur la ligne qui a été
sélectionnée.
Notez que de nombreux appareils (tels que les appareils mobiles à écran tactile) ne peuvent pas générer cet événement. Consultez la page Utiliser des gestionnaires d'événements. pour obtenir un exemple d'utilisation de ce rappel. |
Implémenter des gestionnaires d'événements
Le widget de recherche Knowledge Graph déclenche les événements suivants dans le le contexte de l'entrée avec laquelle il est initialisé. Vous pouvez proposer un service de rappel fonctions dans l'objet de configuration pour implémenter et les gestionnaires de ces événements.
selectHandler : cet événement est déclenché lorsqu'un utilisateur sélectionne un élément.
dans la liste de suggestions. L'événement est accompagné d'un objet de données dans lequel
event.row correspond aux données de la ligne sélectionnée.
event.row.name et event.row.id représentent le nom et
Identifiant de l'élément sélectionné. Le fragment de code suivant montre comment tester les éléments
selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler : cet événement est déclenché lorsqu'un élément est mis en surbrillance
en passant la souris dessus. L'extrait de code suivant montre comment tester
highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Aide et commentaires
Si vous avez des questions, des rapports de bugs ou des commentaires concernant le l'API Knowledge Graph Search, utilisez le Forum d'aide.