Autocomplete Snippet

back to index

For convenience, we provide a simple, unstyled, "drop-it-in-your-page" snippet. We emit a few custom events and all markup has CSS classes, so you can customize both the look and behavior as you wish.


Note: this is meant to be a quick reference; check out the source code for the most up to date technical documentation.

For the most basic use, you just need to include the snippet, and provide an element with id geocode-city-autocomplete. Ideally, it's a container like a `div`.

You can inspect the source of the index page to check out some custom usage, but here's a copy/paste for your quick reference:

<div id="geocode-city-autocomplete"></div>

<h2 id="res-title" class="hidden">You selected:</h3>
<pre id="results">
<script src=""></script>

let el = document.getElementById("geocode-city-autocomplete");
let res = document.getElementById("results");
let title = document.getElementById("res-title");
el.addEventListener("citySelected", function (e) {
  res.textContent = JSON.stringify(e.detail, undefined, 2);


All of the below options are optional, and passed as attributes of the element you identify as geocode-city-autocomplete

Your api key. If not provided, the user's browser will be used for rate limiting.
The number of suggestions to show, defaults to 5.
The name attribute for the text input.
The class attribute for the text input.


All of the below are custom events emitted in the element you use the snippet on. You can use addEventListener to listen for them, and any data included is sent through the event.detail property (read more about custom events on MDN.)

When a city is selected from the dropdown. Includes the full city object.
An array of cities, if any results are found.
When no results are found, no data is sent.
In the event of a client or server error; the error message is sent.


TODO. In the meantime, check out the source: all markup that the snippet generates has the geocode-city__ prefix.