Skip to main content

Additional Configuration

Expanding on the additional configuration options for AddressZen's Address Lookup service can help you fine-tune how address data is gathered and presented within your application, enhancing usability and the overall user experience. Here's a detailed explanation of each configuration option mentioned:

Separate Input Field​

inputField

You can specify an alternative input field for the Address Lookup to bind to, other than the default first address line field. This is useful if your form layout requires the address lookup to initiate from a different input element.

inputField: "#customInputField" // Use a CSS selector or HTML Element

Defaults: If not specified, Address Lookup defaults to using outputFields.line_1.

Disable Key Check​

checkKey

By default, Address Lookup performs a check to ensure your API key is valid and can be used for lookups. You might want to disable this check in certain development scenarios.

checkKey: false // Disable the initial API key check

Failure Conditions: The check might fail due to exhausted lookup quotas, URL whitelist issues, or user-specific limits.

Handling Failures: Use the onFailedCheck callback to manage situations where the key check fails.

Query Options​

queryOptions

Query options let you apply filters or biases to your address lookup queries, such as limiting suggestions to certain regions or types of addresses.

queryOptions: {
  // Custom query parameters
}

Remove Organization from Address Line​

removeOrganisation

If your application requires addresses without organization names, this option can automatically remove them from address suggestions.

removeOrganisation: true // Remove organization names from address lines

Disable Chrome Autofill​

autocomplete

Sets the autocomplete= attribute of the input element. Setting this attribute aims to prevent some browsers (particularly Chrome) from providing a clashing autofill overlay.

The best practice for this attribute breaks over time (see https://stackoverflow.com/questions/15738259/disabling-chrome-autofill) and is specific to different forms. If you are observing Chrome's autofill clashing on your form, update this attribute to the best practice du jour.

autocomplete: "off" // Suggested value to disable browser autofill

Defaults to "none".

Hide Address Fields​

hide

Automatically hiding address input fields until an address is selected or manual input is chosen can streamline the user interface.

{
  hide: [
    "#line_1",
    document.getElementById("line_2"),
    document.getElemmentById("line_3")],
  ],
}

When enabled, the HTMLElements supplied in hide are hidden with display: none; when Address Lookup initializes and attaches to the DOM. These elements will be subsequently unhidden if an address is selected or the user opts to manually input an address.

Enabling this feature will also create a clickable element in the Address Lookup, which provides users the option to manually input an address. You may provide your own clickable element with unhide or customize the clickable element with msgUnhide and unhideClass.

Defaults to [].

Custom Unhide Element​

unHide

Specify a query selector (string) or (HTMLElement) as a custom clickable element to unhide and form fields configured with hide. This will prevent the default unhide element from being rendered.