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-aaaaaaaaaaaaaaaa"
  placeholder="Global"
  size="5"
  ></ge-autocomplete>

<hr />

<ge-autocomplete
  api_key="ge-aaaaaaaaaaaaaaaa"
  boundary.country="US,CA,MX"
  placeholder="North America"
  size="5"
></ge-autocomplete>

<hr />

<ge-autocomplete
  api_key="ge-aaaaaaaaaaaaaaaa"
  placeholder="Custom Templating"
  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_code);
        label = parts.join(', ');
      }
     %>${label}
  </template>
</ge-autocomplete>

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

JavaScript

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

el.addEventListener('select', ({detail}) => {
	var pretty = JSON.stringify(detail, undefined, 4)
  document.querySelector('#result').innerHTML = pretty
})