PCA Predict address finder

Implementation of the Postcode Anywhere Capture+ tools.

All dependencies for this are wrapped up in a code bundle and lazy loaded as required.

Supports multiple PCA Predict instances on the same page.

For testing purposes please use the postcode WR5 3DA to avoid incurring costs for API usage.

For dynamically created Address inputs (like adding tenants), you can initialise PCA Predict for that by calling new zd.PcaPredict(element) where element is the containing .PcaPredict element.

<form class="PcaPredict">
  <div class="Input Input--span u-block">
  <div class="Input-field">
    <input class="Input-input" type="text" name="pca1_name" id="pca1_name" value="" placeholder="Name">
    <label class="Input-label" for="pca1_name">Name</label>
    <div class="Input-border"></div>
  </div>
</div>

  <div class="Input Input--span u-block u-push-1">
  <div class="Input-field">
    <input class="Input-input" type="email" name="pca1_email" id="pca1_email" value="" placeholder="Email">
    <label class="Input-label" for="pca1_email">Email</label>
    <div class="Input-border"></div>
  </div>
</div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="line1" id="line1" data-pca-field="Line1" value="" placeholder="Start typing your address or postcode">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="line2" id="line2" data-pca-field="Line2" value="" placeholder="">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="line3" id="line3" data-pca-field="Line3" value="" placeholder="">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="line4" id="line4" data-pca-field="Line4" value="" placeholder="">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="city" id="city" data-pca-field="City" value="" placeholder="City">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="postalcode" id="postcode" data-pca-field="PostalCode" value="" placeholder="Postcode">
    </div>
  </div>

  <div class="Input Input--span u-block u-push-1">
    <div class="Input-field">
      <input class="Input-input" type="text" name="country" id="country" data-pca-field="Country" value="" placeholder="Country">
    </div>
  </div>

</form>