Le widget Knowledge Graph Search est un module JavaScript qui vous aide à ajouter des thèmes aux zones de saisie de votre site. Les utilisateurs commencent à saisir du texte, et le widget trouve des correspondances pertinentes à mesure qu'ils saisissent du texte à l'aide de l'API Knowledge Graph Search.
Fonctionnalités
- Multi-navigateurs : ce langage est écrit dans une solution Closure éprouvée et compatible avec plusieurs navigateurs, et il est compilé pour du code JavaScript pur.
- Plusieurs domaines : Aucun serveur proxy n'est requis grâce au JSONP.
- Hébergé sur les serveurs Google
- Sans frais ! (Les Conditions d'utilisation standards de l'API Google s'appliquent.)
Pourquoi utiliser le widget Knowledge Graph Search ?
- Permettez à vos utilisateurs de saisir moins de texte pour saisir davantage de données.
- Facilitez 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 la même entité : "Puff Daddy", "P". Diddy, Sean Combs fait 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 le code suivant dans la source de votre site Web. Vous devez utiliser une clé API pour 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 votre document <body>, utilisez un champ de saisie avec un ID correspondant, 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'effectuer des requêtes Suggest. Sans clé API, le widget ne fonctionne pas. Si vous ne possédez pas encore de clé API, suivez les instructions de la page Conditions préalables pour en obtenir une.
Une fois la clé obtenue, transmettez-la au widget Knowledge Graph Search à l'aide d'un code semblable à celui-ci:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Configurer le widget Recherche
Votre code JavaScript peut appeler KGSearchWidget() avec un troisième argument vide, comme indiqué ci-dessus. Vous pouvez également utiliser ce troisième argument pour transmettre un objet de configuration, en spécifiant divers filtres, contraintes et gestionnaires d'événements.
Transmettre un objet "config"
Le widget Knowledge Graph Search accepte un paramètre de configuration facultatif. Cela vous permet de remplir une structure de données avec plusieurs options de configuration et de 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 au widget Knowledge Graph Search.
| Nom | Type | Par défaut | Description |
|---|---|---|---|
| langues | Tableau(Chaîne) | Anglais |
Liste de codes de langue (définis dans la norme ISO 639-1) qui permettent d'effectuer la recherche dans toutes les langues spécifiées. Les résultats sont classés dans la première langue listée et affichés dans la première langue de la liste contenant le nom de l'entité. C'est l'anglais qui offre la meilleure couverture. Cette valeur est transmise de manière transparente à 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 types d'entité fournis. Si ce paramètre est omis, renvoie les 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é. Le contenu plus long que maxDescChars sera tronqué. |
| selectHandler | Fonction | null |
Fonction de rappel à appeler lorsqu'une ligne est sélectionnée. L'argument de la fonction de rappel est un événement et inclut un attribut row contenant des informations sur la ligne sélectionnée. Consultez la section Utiliser des gestionnaires d'événements pour obtenir un exemple d'utilisation de ce rappel.
|
| highlightHandler | Fonction | null |
Fonction de rappel qui est appelée lorsque l'utilisateur pointe sur la ligne.
L'argument de la fonction de rappel est un événement et inclut un attribut row contenant des informations sur la ligne 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 section 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 contexte de l'entrée avec laquelle il est initialisé. Vous pouvez fournir des fonctions de rappel dans l'objet de configuration afin de mettre en œuvre des gestionnaires pour 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 l'ID de l'élément sélectionné. Le fragment de code suivant montre comment tester l'action de 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 lorsque l'utilisateur pointe dessus. L'extrait de code suivant montre comment tester l'action de 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 sur l'API Knowledge Graph Search, consultez le forum d'aide.