gridpin

Address autocomplete on your own server

Hosted address autocomplete is billed by session or by keystroke and sees every address your customers type. A local server can answer the same field from the country file.

New Take addresses in JavaScript Server, Docker Retail, e-commerce Websites, help desks

What you have

A form and the element <gridpin-address> (one file, gridpin-address.js, no dependencies), pointed at your own server:

form.htmlfile
<form action="/checkout" method="post">
  <script type="module" src="gridpin-address.js"></script>
  <gridpin-address endpoint="http://127.0.0.1:8080" min-chars="3" name="address"></gridpin-address>
  <button>Continue</button>
</form>

Steps

1. Start the server for the country of your customers:

terminalCLI
$ gridpin serve usa.bin --port 8080

2. The field asks /v1/suggest as the person types; the same request by hand:

terminalCLI
$ curl -s "http://127.0.0.1:8080/v1/suggest?q=233%20south%20wack&k=3"
{"suggestions":[{"commune":"Chicago","label":"233 South WACKER Drive, Chicago","lat":41.8793071,"lon":-87.6366869,"street":"South WACKER Drive"},{"commune":"Hartford, WI","label":"233 South Wacker Drive, Hartford, WI","lat":43.3164316,"lon":-88.390927,"street":"South Wacker Drive"},{"commune":"Idaho Falls","label":"233 South Wackerli Avenue, Idaho Falls","lat":43.4580517,"lon":-111.9778545,"street":"South Wackerli Avenue"}]}

3. A street abbreviated the way people often type it gets no suggestion:

terminalCLI
$ curl -s "http://127.0.0.1:8080/v1/suggest?q=2100%20s%20halsted&k=3"
{"suggestions":[]}

What you get

Each suggestion carries a label to show, the street, the town and the point. When the person picks one, the element fires gridpin-select with that suggestion in event.detail, and the form sends the label in the field named by name.

Why it works

The server looks up streets whose names start as the typed text and lists house points of that number on them. It keeps nothing between requests: there is no session, no key and no count of what was typed. The answers come from the same file as geocoding, so a chosen suggestion geocodes to the same house.

Limits

  • Abbreviations are not expanded while typing: s halsted finds nothing, south halsted does.
  • A town after a comma does not narrow the list yet: the suggestions come from all towns of the file, so 1600 pennsylvania lists other towns before Washington.
  • One country per server; the element needs the server reachable from the page, with your own TLS in front of it.

All its keys: command reference. The function: suggestions in an address field.

More