JSFiddle - React, Tailwind, and code Playground

by Peter Johnson

HTML

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

<ge-autocomplete
  api_key="ge-471b7a7824a48380"
  boundary.country="DE"
  layers="address,street"
  placeholder="Search for a German street or address"
  size="5"
>
  <template string>
    <%
      props = item.feature.properties;
      label = props.label;
      
      // custom labels for address layer
      if (props.layer == 'address') {
        parts = [props.street + ' ' + props.housenumber];
        if (props.postalcode) { parts.push(props.postalcode); }
        if (props.locality) { parts.push(props.locality); }
        else if (props.localadmin) { parts.push(props.localadmin); }
        parts.push(props.country);
        label = parts.join(', ');
      }
     %>${label}
  </template>
</ge-autocomplete>

<pre id="result"></pre>

JavaScript

const el = document.querySelector('ge-autocomplete')

el.addEventListener('select', ({
  detail,
  currentTarget
}) => {
  console.log('select', currentTarget)
  console.log(detail)

  document.querySelector('#result').innerHTML = JSON.stringify(detail, undefined, 4)
})

setTimeout(6000, () => {
el.setAttribute('boundary.country','us')
})