Autocomplete Element

This guide covers how to add autocomplete geocoding functionality to any web app or web page.

The autocomplete element is available through npm and also provided as a single javascript file which can be linked using the traditional <script> tag method.

Installation #

With a modern version of node installed:

npm install @geocodeearth/autocomplete-element --save
import '@geocodeearth/autocomplete-element'

Pre-bundled Version #

If you’re not using npm or bundling your own dependencies with something like webpack, a pre-bundled and minified version is available to link directly:

<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@geocodeearth/autocomplete-element/dist/bundle.js">
</script>

Basic Usage #

In order to authenticate, you’ll need a valid API key from Geocode Earth:

<ge-autocomplete
  api_key="<YOUR API KEY>"
></ge-autocomplete>

Customizing Search Parameters #

See the documentation for a list of available attributes:

<ge-autocomplete
  api_key="<YOUR API KEY>"
  size="5"
  boundary.country="US,CA"
  placeholder="North American Search"
></ge-autocomplete>

Events #

The HTML element emits events, attaching event listeners allows your application to be notified when the user interacts with the element.

The event.detail payload contains details about each event.

// 'select' event handler - when a user selects an item from the suggestions
el.addEventListener('select', (event) => {
  console.log(event.detail, event)
})

// 'change' event handler - on every keystroke as the user types
el.addEventListener('change', (event) => {
  console.log(event.detail, event)
})

// 'error' event handler - on error
el.addEventListener('error', (event) => {
  console.log(event.detail, event)
})

Visual Customization #

The Github documentation outlines a variety of options for customizing the visual appearance of the element:

Feedback & Feature Requests #

If you find a bug, or would like to request a feature, please open an issue on Github.