Widget de la Búsqueda del Gráfico de conocimiento

El widget de búsqueda del Gráfico de conocimiento es un módulo de JavaScript que te ayuda a agregar temas a los cuadros de entrada de tu sitio. Los usuarios comienzan a escribir texto, y el widget encuentra coincidencias relevantes a medida que escriben con la API de Knowledge Graph Search.

Ejemplo de Widget de la Búsqueda

Atributos

  • En varios navegadores: Está escrito en un cierre bien probado y entre navegadores, y compilado en JavaScript puro.
  • Multidominio. Gracias a JSONP, no se requieren servidores proxy.
  • Alojado en los servidores de Google.
  • Gratis (Se aplican las Condiciones estándar de las API de Google).

¡Pruébalo!

¿Por qué usar el Widget de búsqueda del Gráfico de conocimiento?

  • Permite que los usuarios escriban menos para ingresar más datos.
  • Haz que el ingreso de datos sea más fácil y preciso.
  • Proporciona imágenes y descripciones para reducir la carga cognitiva de los usuarios.
  • Evita los nombres duplicados para la misma entidad: Puff Daddy, P. Quisiera, Sean Combs se refieren a /en/sean_combs.

Cómo agregar el widget de búsqueda del Gráfico de conocimiento a tu sitio web

Para agregar el widget de búsqueda del Gráfico de conocimiento a una página, incluye el siguiente código en la fuente de tu 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 para incluir en tu 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>

Luego, en tu documento <body>, usa un campo de entrada con un ID coincidente, como se muestra a continuación:

<input type="text" id="myInput">
<script type="text/javascript">
  KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>

Obtén y usa una clave de API

Obtener una clave de API permite que tu aplicación realice solicitudes de sugerencia. Sin una clave de API, el widget no funcionará. Si aún no tienes una clave de API, sigue las instrucciones en la página Requisitos para obtener una.

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"), {});

Cómo configurar el widget de búsqueda

Tu JavaScript puede llamar a KGSearchWidget() con un tercer argumento vacío, como se muestra más arriba. También puedes usar este tercer argumento para pasar un objeto de configuración y especificar varios filtros, restricciones y controladores de eventos.

Pasa un objeto de configuración

El widget de búsqueda del Gráfico de conocimiento acepta un parámetro de configuración opcional. Esto te permite propagar 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 pasar al widget de búsqueda del Gráfico de conocimiento.

Nombre Tipo Predeterminada Descripción
lenguajes Arreglo(String) Inglés Es una 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 tiene un nombre para la entidad. El inglés tiene la mayor cobertura. Este valor se pasa de manera transparente a la API de búsqueda.
Por ejemplo, si los idiomas están configurados en [fr, en], the widget will show descriptions for entities in the primary language, French, when possible. Otherwise, it will fall back to English as a secondary language.
límite Número entero 20 Cantidad máxima de resultados en el menú desplegable.
tipos Arreglo(String) Cualquier tipo Solo muestra entidades que coincidan con cualquiera de los tipos de entidad proporcionados. Si se omite este parámetro, se mostrarán coincidencias de cualquier tipo de entidad.
maxDescChars Número entero Ilimitado Es la cantidad máxima de caracteres en la descripción detallada de cada entidad. Se truncará el contenido que supere el límite de maxDescChars.
selectHandler Función null La función de devolución de llamada a la que se debe llamar cuando se selecciona una fila El argumento de la función de devolución de llamada es un evento y, además, incluye un atributo row que contiene información sobre la fila seleccionada. Consulta Cómo usar controladores de eventos para ver un ejemplo del uso de esta devolución de llamada.
highlightHandler Función null La función de devolución de llamada a la que se llama cuando el usuario se desplaza sobre la fila. El argumento de la función de devolución de llamada es un evento y, además, incluye un atributo row que contiene información sobre la fila seleccionada.
Ten en cuenta que muchos dispositivos (como el hardware de dispositivos móviles con pantalla táctil) no pueden generar este evento.
Consulta Cómo usar controladores de eventos para ver un ejemplo del uso de esta devolución de llamada.

Cómo implementar controladores de eventos

El widget de búsqueda del Gráfico de conocimiento activa los siguientes eventos dentro del contexto de la entrada con la que se inicializa. Puedes proporcionar funciones de devolución de llamada en el objeto de configuración a fin de implementar controladores para 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, en el que 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. En el siguiente fragmento de código, se 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 que coloca el cursor sobre un elemento se destaca. 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);
  }
});

Obtener ayuda y enviar comentarios

Si tienes preguntas, informes de errores o comentarios sobre la API de búsqueda del Gráfico de conocimiento, consulta el Foro de ayuda.