El widget de búsqueda del gráfico de conocimiento es un módulo de JavaScript que te ayuda a añadir temas a los cuadros de entrada de tu sitio. Los usuarios empiezan a escribir texto y el widget busca coincidencias relevantes a medida que escriben, usando la API Search de gráfico de conocimiento.
Funciones
- Es compatible con varios navegadores: está escrito en Closure, que se ha probado exhaustivamente y es compatible con varios navegadores, y se ha compilado en JavaScript puro.
- Multidominio. No se necesitan servidores proxy gracias a JSONP.
- Alojado en los servidores de Google.
- ¡Sin coste económico! Se aplican los Términos de las APIs de Google estándar.
¿Por qué usar el widget de búsqueda del gráfico de conocimiento?
- Permite que tus usuarios escriban menos para introducir más datos.
- Facilita y mejora la precisión de la introducción de datos.
- Reduce la carga cognitiva de tus usuarios proporcionando imágenes y descripciones.
- Evita los nombres duplicados de la misma entidad: Puff Daddy, P. Diddy y Sean Combs hacen referencia a
/en/sean_combs.
Añadir el widget de búsqueda del gráfico de conocimiento a un sitio web
Para añadir el widget de búsqueda de gráfico de conocimiento a una página, incluya el siguiente código en el código fuente de su sitio web. Deberás usar una clave de API para que el widget pueda acceder a la API de gráfico de conocimiento de Google.
Código que debe incluir en su sitio web
Incluye lo siguiente en el <head> de tu 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>
A continuación, en el documento <body>, usa un campo de entrada con un ID de coincidencia, como este:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Obtener y usar una clave de API
Obtener una clave de API permite que tu aplicación haga solicitudes de sugerencias. Sin una clave de API, el widget no funcionará. Si aún no tienes una clave de API, sigue las instrucciones de la página Requisitos previos para obtenerla.
Una vez que obtengas una clave, pásala al widget de búsqueda del gráfico de conocimiento con un código como el siguiente:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Configurar el widget de búsqueda
Tu JavaScript puede llamar a KGSearchWidget() con un tercer argumento vacío, como se muestra arriba. También puede usar este tercer argumento para transferir un objeto de configuración, especificando varios filtros, restricciones y controladores de eventos.
Transferir un objeto de configuración
El widget de búsqueda del gráfico de conocimiento acepta un parámetro de configuración opcional. De esta forma, puedes rellenar una estructura de datos con varias opciones de configuración y pasarla al widget, como se muestra en el siguiente ejemplo.
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);
Opciones de configuración
En la siguiente tabla se describen las opciones de configuración que puedes transferir al widget de búsqueda del gráfico de conocimiento.
| Nombre | Tipo | Predeterminado | Descripción |
|---|---|---|---|
| idiomas | Array(String) | Inglés |
Lista de códigos de idioma (definidos en ISO 639-1) que hacen que la búsqueda se realice en todos los idiomas especificados. Los resultados se clasifican en el primer idioma de la lista y se muestran en el primer idioma de la lista que tenga un nombre para la entidad. El inglés es el idioma que tiene la mayor cobertura. Este valor se transfiere de forma transparente a la API Search. Por ejemplo, si los idiomas son [fr, en] |
| límite | Entero | 20 | Número máximo de resultados en el menú desplegable. |
| tipos | Array(String) | Cualquier tipo | Devuelve solo las entidades que coincidan con alguno de los tipos de entidad proporcionados. Si se omite este parámetro, se devolverán las coincidencias de cualquier tipo de entidad. |
| maxDescChars | Entero | Ilimitado | El número máximo de caracteres de la descripción detallada de cada entidad. El contenido que supere el valor de maxDescChars se truncará. |
| selectHandler | Función | null |
Función de retrollamada a la que se llama cuando se selecciona una fila. El argumento de la función de retrollamada es un evento e incluye un atributo row que contiene información sobre la fila seleccionada. Consulta un ejemplo de uso de esta retrollamada en Usar controladores de eventos.
|
| highlightHandler | Función | null |
Función de retrollamada a la que se llama cuando el usuario coloca el cursor sobre la fila.
El argumento de la función de retrollamada es un evento e incluye un atributo row que contiene información sobre la fila seleccionada.
Ten en cuenta que muchos dispositivos (como el hardware móvil con pantalla táctil) no pueden generar este evento. Consulta Usar controladores de eventos para ver un ejemplo de cómo usar esta retrollamada. |
Implementar controladores de eventos
El widget de búsqueda del gráfico de conocimiento activa los siguientes eventos en el contexto de la entrada con la que se inicializa. Puedes proporcionar funciones de retrollamada en el objeto de configuración para implementar controladores de estos eventos.
selectHandler este evento se activa cuando un usuario selecciona un elemento de la lista de sugerencias. El evento va acompañado de un objeto de datos donde event.row son los datos de la fila seleccionada.
event.row.name y event.row.id representan el nombre y el ID del elemento seleccionado. El siguiente fragmento de código muestra cómo puedes probar lo que hace selectHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler este evento se activa cuando el usuario destaca un elemento al colocar el cursor sobre él. En el siguiente fragmento se muestra cómo puedes probar lo que hace highlightHandler.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Ayuda y comentarios
Si tienes alguna pregunta, quieres informar de un error o enviar comentarios sobre la API de búsqueda de gráfico de conocimiento, utiliza el foro de ayuda.