Guias

Crie uma caixa de sugestões “você quis dizer” com preenchimento automático

Uma caixa “você quis dizer” funciona melhor quando aparece discretamente, oferece uma lista curta e sai do caminho se nenhuma das sugestões servir. O endpoint de preenchimento automático foi feito exatamente para esse padrão.

A requisição

GET /v1/autocomplete?q=Baker Stret&limit=4
{
  "status": "ok",
  "query": "Baker Stret",
  "suggestions": [
    {"text": "Baker Street, London, UK", "place_id": "abc123"},
    {"text": "Baker Street, York, UK", "place_id": "abc789"}
  ]
}

Observe que um erro de digitação como “Stret” na consulta não impede que sugestões razoáveis sejam retornadas, já que o endpoint foi feito para funcionar com entradas imperfeitas, que é justamente o objetivo de uma caixa de sugestões.

Um segundo exemplo: nenhuma sugestão

Nem toda consulta, com ou sem erro de digitação, produz uma correspondência útil.

GET /v1/autocomplete?q=Zzqxlm Nonexistent Rd&limit=4
{
  "status": "ok",
  "query": "Zzqxlm Nonexistent Rd",
  "suggestions": []
}

Um array suggestions vazio aqui é uma resposta correta, não um sinal de que algo deu errado com a requisição. Projete a caixa para desaparecer discretamente quando isso acontecer, em vez de mostrar uma lista suspensa vazia ou um estado de erro visível para uma entrada que simplesmente não tem uma boa correspondência.

Exibindo a lista

Mostre o campo text de cada sugestão como rótulo visível e mantenha o place_id associado à sugestão clicada, já que é esse identificador que você repassa para resolver o endereço completo depois, em vez de reinterpretar o texto exibido.

Mantendo tudo opcional

A parte mais importante deste padrão, especialmente em um site sem JavaScript no lado do cliente controlando a interação, é que o campo continue aceitando um endereço digitado diretamente no envio do formulário, com ou sem clique em uma sugestão. Uma caixa de sugestões que bloqueia o envio até que uma das opções seja selecionada transforma um empurrão útil em uma exigência rígida, e qualquer endereço que legitimamente não esteja na lista de sugestões se torna impossível de enviar.

Um caso extremo que vale a pena testar

Endereços escritos em um sistema de escrita diferente daquele com que a sua caixa de sugestões foi testada principalmente, ou nomes de lugares transliterados, fazem parte de verdade da maioria das bases de endereços e merecem o mesmo tratamento de “recorrer ao texto simples” que qualquer outra consulta sem correspondência. Não suponha que a falta de sugestões para uma entrada incomum significa que a entrada em si é inválida, já que a resposta correta muitas vezes é apenas deixar o cliente enviar exatamente o que digitou.

Limitando as requisições

Defina limit com um número pequeno, de três a cinco costuma bastar para uma caixa de sugestões, já que uma lista mais longa anula o propósito de uma leitura visual rápida. Aplique debounce às chamadas para que uma requisição só seja disparada depois de uma breve pausa na digitação, mantendo baixo o número total de requisições por sessão.

Custo por sessão

Um campo de endereço típico pode disparar algumas chamadas de preenchimento automático por visitante enquanto ele digita e se corrige, cada uma sendo uma requisição. Isso é uma pequena fração das 2.500 requisições gratuitas por dia incluídas em cada chave, ou disponíveis a partir de um único endereço sem chave, mesmo em um formulário com tráfego significativo.

Uma caixa de sugestões bem construída corrige erros de digitação discretamente e sai do caminho para tudo o que não reconhece. As definições completas dos campos estão na documentação de preenchimento automático de endereços.