Detach and Re-attach Address Finder on your form

Detaching Address Finder

When you want to remove Address Finder from your form (e.g. after the user selects an address), you can do so by calling .detach() on the Address Finder controller. This will disable Address Finder's listening capabilities and remove any address suggestions.

For instance you can call this.detach() in the onAddressPopulated callback function to stop the Address Finder after the user has selected an address.

Re-Attaching Address Finder

You can attach Address Finder back to line one if you hold on to a reference of the controller with .attach().

JavaScript

 
  const controller = AddressFinder.setup({
    apiKey: "ak_test",
    onAddressPopulated: function () {
      this.detach();
    },
    outputFields: {
      line_1: "#line_1",
      line_2: "#line_2",
      line_3: "#line_3",
      post_town: "#post_town",
      postcode: "#postcode"
    }
  });
    
    function reAttach() {
      controller.attach();
    }

HTML

<form>
    <h1>Address Form</h1>
    <label for="line_1">Address First Line</label>
    <input type="text" id="line_1" />
    <label for="line_2">Address Second Line</label>
    <input type="text" id="line_2" />
    <label for="line_3">Address Third Line</label>
    <input type="text" id="line_3" />
    <label for="post_town">Town or City</label>
    <input type="text" id="post_town" />
    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" />
    <button onClick="reAttach()">Reset Form</button>
</form>

Live Demo

Loading...