Guías

Crea un cuadro de sugerencias "quizás quisiste decir" con autocompletado

Un cuadro de "quizás quisiste decir" funciona mejor cuando aparece con discreción, ofrece una lista corta y se aparta si ninguna de las sugerencias encaja. El endpoint de autocompletado está hecho justo para ese patrón.

La solicitud

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"}
  ]
}

Fíjate en que una errata como "Stret" en la consulta no impide que vuelvan sugerencias razonables, ya que el endpoint está hecho para funcionar con entradas imperfectas, que es precisamente el sentido de un cuadro de sugerencias.

Un segundo ejemplo: ninguna sugerencia

No todas las consultas, tengan erratas o no, producen una coincidencia útil.

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

Un array de sugerencias vacío es aquí una respuesta correcta, no una señal de que algo haya fallado en la solicitud. Diseña el cuadro para que desaparezca con discreción cuando esto ocurra, en lugar de mostrar un desplegable vacío o un estado de error visible para una entrada que simplemente no tiene una buena coincidencia.

Mostrar la lista

Muestra el campo text de cada sugerencia como etiqueta visible y conserva el place_id asociado a la que se seleccione, ya que ese identificador es lo que pasas después para resolver la dirección completa, en lugar de volver a analizar el texto mostrado.

Mantenerlo opcional

La parte más importante de este patrón, sobre todo en un sitio sin JavaScript en el cliente que gestione la interacción, es que el campo siga aceptando directamente una dirección escrita al enviar el formulario, se haya seleccionado o no una sugerencia. Un cuadro de sugerencias que bloquea el envío hasta que se elige una de sus opciones convierte una ayuda en un requisito obligatorio, y cualquier dirección que legítimamente no esté en la lista de sugerencias pasa a ser imposible de enviar.

Un caso límite que vale la pena probar

Las direcciones escritas en un sistema de escritura distinto de aquel con el que se probó principalmente tu cuadro de sugerencias, o los nombres de lugar transliterados, forman parte real de la mayoría de las bases de datos de direcciones y merecen el mismo tratamiento de "recurrir al texto simple" que cualquier otra consulta sin coincidencia. No des por hecho que la falta de sugerencias para una entrada inusual significa que la entrada no es válida, ya que la respuesta correcta suele ser simplemente dejar que el cliente envíe exactamente lo que escribió.

Limitar las solicitudes

Fija limit en un número pequeño, de tres a cinco suele bastar para un cuadro de sugerencias, ya que una lista más larga anula el propósito de un vistazo rápido. Aplica debounce a las llamadas para que la solicitud solo se lance tras una breve pausa en la escritura, lo que mantiene bajo el número total de solicitudes por sesión.

Coste por sesión

Un campo de dirección típico puede lanzar unas cuantas llamadas de autocompletado por visitante mientras escribe y se corrige, y cada una es una solicitud. Eso es una fracción pequeña de las 2.500 solicitudes gratuitas al día incluidas con cada clave, o disponibles desde una sola dirección sin clave, incluso en un formulario con un tráfico considerable.

Un cuadro de sugerencias bien hecho detecta las erratas con discreción y se aparta ante cualquier cosa que no reconozca. Las definiciones completas de los campos están en la documentación de autocompletado de direcciones.