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.

Usage

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">
</pre>
<script src="https://cdn.jsdelivr.net/gh/geocode-city/autocomplete@0.1.0.1/dist/geocode_city.min.js"></script>
<script>


let el = document.getElementById("geocode-city-autocomplete");
let res = document.getElementById("results");
let title = document.getElementById("res-title");
el.addEventListener("citySelected", function (e) {
  title.classList.remove("hidden");
  res.textContent = JSON.stringify(e.detail, undefined, 2);
});   
</script>

Options

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

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

Events

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.)

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

Styling

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