https://docs.addresszen.com/assets/js/c2b04aa2.aaa92c7e.js

1"use strict";(globalThis.webpackChunk_atlas_docs_zen=globalThis.webpackChunk_atlas_docs_zen||[]).push([[6154],{4056(e,i,n){n.d(i,{R:()=>r,x:()=>a});var s=n(2155);const t={},o=s.createContext(t);function r(e){const i=s.useContext(o);return s.useMemo(function(){return"function"==typeof e?e(i):{...i,...e}},[i,e])}function a(e){let i;return i=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(o.Provider,{value:i},e.children)}},7628(e,i,n){n.r(i),n.d(i,{assets:()=>d,contentTitle:()=>a,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>l});const s=JSON.parse('{"id":"how-to-switch/additional-configuration","title":"Additional Configuration","description":"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:","source":"@site/docs/how-to-switch/additional-configuration.mdx","sourceDirName":"how-to-switch","slug":"/how-to-switch/additional-configuration","permalink":"/docs/how-to-switch/additional-configuration","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"title":"Additional Configuration","sidebar_label":"Additional Configuration"},"sidebar":"switch","previous":{"title":"Search Boundaries","permalink":"/docs/how-to-switch/search-boundaries"},"next":{"title":"Styling With CSS","permalink":"/docs/styling-with-css"}}');var t=n(5723),o=n(4056);const r={title:"Additional Configuration",sidebar_label:"Additional Configuration"},a=void 0,d={},l=[{value:"Separate Input Field",id:"separate-input-field",level:2},{value:"Disable Key Check",id:"disable-key-check",level:2},{value:"Query Options",id:"query-options",level:2},{value:"Remove Organization from Address Line",id:"remove-organization-from-address-line",level:2},{value:"Disable Chrome Autofill",id:"disable-chrome-autofill",level:2},{value:"Hide Address Fields",id:"hide-address-fields",level:2},{value:"Custom Unhide Element",id:"custom-unhide-element",level:2}];function c(e){const i={a:"a",code:"code",h2:"h2",hr:"hr",p:"p",pre:"pre",strong:"strong",...(0,o.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(i.p,{children:"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:"}),"\n",(0,t.jsx)(i.h2,{id:"separate-input-field",children:"Separate Input Field"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"inputField"})}),"\n",(0,t.jsx)(i.p,{children:"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."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:'inputField: "#customInputField" // Use a CSS selector or HTML Element\n'})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Defaults:"})," If not specified, Address Lookup defaults to using ",(0,t.jsx)(i.code,{children:"outputFields.line_1"}),"."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"disable-key-check",children:"Disable Key Check"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"checkKey"})}),"\n",(0,t.jsx)(i.p,{children:"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."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:"checkKey: false // Disable the initial API key check\n"})}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Failure Conditions:"})," The check might fail due to exhausted lookup quotas, URL whitelist issues, or user-specific limits."]}),"\n",(0,t.jsxs)(i.p,{children:[(0,t.jsx)(i.strong,{children:"Handling Failures:"}

1)," Use the ",(0,t.jsx)(i.code,{children:"onFailedCheck"})," callback to manage situations where the key check fails."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"query-options",children:"Query Options"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"queryOptions"})}),"\n",(0,t.jsx)(i.p,{children:"Query options let you apply filters or biases to your address lookup queries, such as limiting suggestions to certain regions or types of addresses."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:"queryOptions: {\n  // Custom query parameters\n}\n"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"remove-organization-from-address-line",children:"Remove Organization from Address Line"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"removeOrganisation"})}),"\n",(0,t.jsx)(i.p,{children:"If your application requires addresses without organization names, this option can automatically remove them from address suggestions."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:"removeOrganisation: true // Remove organization names from address lines\n"})}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"disable-chrome-autofill",children:"Disable Chrome Autofill"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"autocomplete"})}),"\n",(0,t.jsxs)(i.p,{children:["Sets the ",(0,t.jsx)(i.code,{children:"autocomplete="})," attribute of the input element. Setting this attribute aims to prevent some browsers (particularly Chrome) from providing a clashing autofill overlay."]}),"\n",(0,t.jsxs)(i.p,{children:["The best practice for this attribute changes over time (see ",(0,t.jsx)(i.a,{href:"https://stackoverflow.com/questions/15738259/disabling-chrome-autofill",children:"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."]}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:'autocomplete: "off" // Suggested value to disable browser autofill\n'})}),"\n",(0,t.jsxs)(i.p,{children:["Defaults to ",(0,t.jsx)(i.code,{children:'"none"'}),"."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"hide-address-fields",children:"Hide Address Fields"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"hide"})}),"\n",(0,t.jsx)(i.p,{children:"Automatically hiding address input fields until an address is selected or manual input is chosen can streamline the user interface."}),"\n",(0,t.jsx)(i.pre,{children:(0,t.jsx)(i.code,{className:"language-javascript",children:'{\n  hide: [\n    "#line_1",\n    document.getElementById("line_2"),\n    document.getElementById("line_3"),\n  ],\n}\n'})}),"\n",(0,t.jsxs)(i.p,{children:["When enabled, the HTMLElements supplied in ",(0,t.jsx)(i.code,{children:"hide"})," are hidden with ",(0,t.jsx)(i.code,{children:"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."]}),"\n",(0,t.jsxs)(i.p,{children:["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 ",(0,t.jsx)(i.code,{children:"unhide"})," or customize the clickable element with ",(0,t.jsx)(i.code,{children:"msgUnhide"})," and ",(0,t.jsx)(i.code,{children:"unhideClass"}),"."]}),"\n",(0,t.jsxs)(i.p,{children:["Defaults to ",(0,t.jsx)(i.code,{children:"[]"}),"."]}),"\n",(0,t.jsx)(i.hr,{}),"\n",(0,t.jsx)(i.h2,{id:"custom-unhide-element",children:"Custom Unhide Element"}),"\n",(0,t.jsx)(i.p,{children:(0,t.jsx)(i.code,{children:"unhide"})}),"\n",(0,t.jsxs)(i.p,{children:["Specify a query selector (",(0,t.jsx)(i.code,{children:"string"}),") or (",(0,t.jsx)(i.code,{children:"HTMLElement"}),") as a custom clickable element to unhide address and form fields configured with ",(0,t.jsx)(i.co

1de,{children:"hide"}),". This will prevent the default unhide element from being rendered."]})]})}function h(e={}){const{wrapper:i}={...(0,o.R)(),...e.components};return i?(0,t.jsx)(i,{...e,children:(0,t.jsx)(c,{...e})}):c(e)}}}]);