O widget de pesquisa do Mapa de informações é um módulo JavaScript que ajuda você a adicionar temas a caixas de entrada no seu site. Os usuários começam a digitar o texto, e o widget encontra correspondências relevantes enquanto eles digitam usando a API Knowledge Graph Search.
Recursos
- Diversos navegadores: ele é escrito em closure bem testado e em diferentes navegadores e compilado para JavaScript puro.
- Vários domínios. Não é preciso usar servidores proxy, graças ao JSONP.
- Hospedada em servidores do Google.
- Sem custo financeiro! Sujeito aos Termos padrão das APIs do Google.
Por que usar o widget de pesquisa do Mapa de informações?
- Permita que os usuários digitem menos para inserir mais dados.
- Torne a entrada de dados mais fácil e precisa.
- Reduza a carga cognitiva dos usuários fornecendo imagens e descrições.
- Evite nomes duplicados para a mesma entidade: Puff Daddy, P. Diddy, Sean Combs refere-se a
/en/sean_combs.
Adicionar o widget de pesquisa do Knowledge Graph ao seu site
Para adicionar esse widget a uma página, inclua o código a seguir no código-fonte do seu site. É preciso usar uma chave de API para que o widget possa acessar a API Google Knowledge Graph.
Código a ser incluído no seu site
Inclua o seguinte no <head> do seu 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>
Em seguida, no documento <body>, use um campo de entrada com um
ID correspondente, como este:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Como receber e usar uma chave de API
A obtenção de uma chave de API permite que seu aplicativo faça solicitações do Google Suggest. Sem uma chave de API, o widget não funcionará. Se você ainda não tiver uma chave de API, siga as instruções na página Pré-requisitos para ter uma.
Quando você receber uma chave, transmita-a para o widget de pesquisa do Mapa de informações usando um código como este:
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
Como configurar o widget de pesquisa
Seu JavaScript pode chamar KGSearchWidget() com um terceiro argumento vazio, como
mostrado acima. Ou você pode usar esse terceiro argumento para transmitir um objeto de configuração, especificando vários filtros, restrições e manipuladores de eventos.
Como transmitir um objeto de configuração
O widget de pesquisa do Knowledge Graph aceita um parâmetro de configuração opcional. Isso permite preencher uma estrutura de dados com várias opções de configuração e transmiti-la ao widget, conforme mostrado no exemplo abaixo.
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);
Opções de configuração
A tabela a seguir descreve as opções de configuração que você pode transmitir para o widget de pesquisa do Mapa de informações.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| linguagens | Matriz(String) | Inglês |
Uma lista de códigos de idioma (definidos na ISO 639-1) que fazem com que a pesquisa seja feita em todos os idiomas especificados. Os resultados são classificados no primeiro idioma listado e exibidos no primeiro idioma da lista que tenha um nome para a entidade. O inglês tem a maior cobertura. Esse valor é transmitido de maneira transparente para a API Search. Por exemplo, se os idiomas estiverem definidos como [fr, en] |
| limite | Número inteiro | 20 | Número máximo de resultados no menu suspenso. |
| types | Matriz(String) | Qualquer tipo | Retorna apenas entidades que correspondam a qualquer um dos tipos de entidade fornecidos. Se esse parâmetro for omitido, as correspondências de qualquer tipo de entidade serão retornadas. |
| maxDescChars | Número inteiro | Ilimitado | O número máximo de caracteres na descrição detalhada de cada entidade. O conteúdo maior que maxDescChars será truncado. |
| selectHandler | Função | null |
A função de callback que será chamada quando uma linha for selecionada. O argumento da função de callback é um evento e inclui um atributo row com informações sobre a linha selecionada. Consulte
Como usar manipuladores de eventos
para ver um exemplo de como usar esse callback.
|
| highlightHandler | Função | null |
A função de callback que é chamada quando o usuário passa o cursor sobre a linha.
O argumento da função de callback é um evento e inclui um atributo
row que contém informações sobre a linha
selecionada.
Lembre-se de que muitos dispositivos (como hardware de tela sensível ao toque) não podem gerar esse evento. Consulte Como usar manipuladores de eventos para ver um exemplo de como usar esse callback. |
Como implementar manipuladores de eventos
O widget de pesquisa do Knowledge Graph aciona os seguintes eventos no contexto da entrada com que ele é inicializado. Você pode fornecer funções de callback no objeto de configuração para implementar gerenciadores para esses eventos.
selectHandler: este evento é acionado quando um usuário seleciona um item
da lista do Google Suggest. O evento é acompanhado por um objeto de dados em que
event.row são os dados da linha selecionada.
event.row.name e event.row.id representam o nome e
o ID do item selecionado. O fragmento de código abaixo mostra como testar o que
selectHandler faz.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler: este evento é acionado quando um item é destacado
pelo usuário ao passar o cursor sobre ele. O snippet abaixo mostra como testar o que
highlightHandler faz.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"highlightHandler": function(e) {
alert("highlighted " + e.row.name);
}
});
Ajuda e feedback
Se você tiver dúvidas, relatórios de bugs ou feedback sobre a API Knowledge Graph Search, use o Fórum de Ajuda.