O widget de pesquisa do Mapa de informações é um módulo JavaScript que ajuda você a adicionar tópicos às caixas de entrada no seu site. Os usuários começam a digitar texto, e o widget encontra correspondências relevantes enquanto eles digitam, usando a API Knowledge Graph Search.
Recursos
- Compatível com vários navegadores: escrito em Closure, que é bem testado e compatível com vários navegadores, e compilado em JavaScript puro.
- Entre domínios. Não são necessários servidores proxy graças ao JSONP.
- Hospedado nos servidores do Google.
- Sem custos financeiros Os Termos das APIs do Google padrão se aplicam.
Por que usar o widget de pesquisa do Mapa de informações?
- Permita que os usuários digitem menos para inserir mais dados.
- Facilitar e aumentar a precisão da entrada de dados.
- 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, todos se referem a
/en/sean_combs.
Adicionar o widget de pesquisa do Mapa de informações ao seu site
Para adicionar o widget de pesquisa do Mapa de informações a uma página, inclua o seguinte código na origem do seu site. Você precisa usar uma chave de API para que o widget possa acessar a API Google Mapa de informações.
Código para incluir 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, assim:
<input type="text" id="myInput">
<script type="text/javascript">
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {});
</script>
Como receber e usar uma chave de API
Com uma chave de API, seu aplicativo pode fazer solicitações de sugestão. Sem uma chave de API, o widget não vai funcionar. Se você ainda não tiver uma chave de API, siga as instruções na página Pré-requisitos para conseguir uma.
Depois de conseguir 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, conforme mostrado acima. Ou use 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 Mapa de informações 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 a seguir.
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 podem ser transmitidas para o widget de pesquisa do Mapa de informações.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| idiomas | Array(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 tem um nome para a entidade. O inglês tem a maior cobertura. Esse valor é transmitido de forma 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. |
| tipos | Array(String) | Qualquer tipo | Retorna apenas entidades que correspondem a um dos tipos de entidade fornecidos. Se esse parâmetro for omitido, retorne correspondências de qualquer tipo de entidade. |
| 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 a ser chamada quando uma linha é 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 uso desse callback.
|
| highlightHandler | Função | null |
A função de callback 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 com informações sobre a linha que foi
selecionada.
Muitos dispositivos, como hardware móvel com tela sensível ao toque, não podem gerar esse evento. Consulte Como usar manipuladores de eventos para ver um exemplo de uso desse callback. |
Implementar manipuladores de eventos
O widget de pesquisa do Mapa de informações aciona os seguintes eventos no contexto da entrada com que ele é inicializado. É possível fornecer funções de retorno de chamada no objeto de configuração para implementar manipuladores desses eventos.
selectHandler: esse evento é acionado quando um usuário seleciona um item na lista de sugestões. 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 a seguir mostra como testar o que
selectHandler faz.
KGSearchWidget(<API_KEY>, document.getElementById("myInput"), {
"selectHandler": function(e) {
alert("selected " + e.row.name);
}
});
highlightHandler: esse evento é acionado quando um item é destacado
pelo usuário ao passar o cursor sobre ele. O snippet a seguir 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 Mapa de informações Search, use o Fórum de Ajuda.