Woosmap MultiSearch Autofill Address Form
Autofill Address Form with address components from details
Does your application include an address form, such as the shipping address for an online order, a credit card billing address, or a ridesharing booking form? Woosmap MultiSearch Library can help users supply the details.
The Autofill Address Form sample demonstrates how to use the item.address_components returned from
a woosmap.multisearch.detailsMulti() call to populate the address form.
When the user selects an address from the pick list, get the details of selected address and process it to fulfill
the corresponding inputs of your form.
Returned components can differ from the queried country. You might need to use a different set of components to
align with the postal address formats used in your regions.
Here is the sample code to get the details of selected item and process the address components:
function displayMultiSearchResponse(result) {
let shippingAddress = "";
let shippingAddress2 = "";
let postcode = "";
for (const component of result.item.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
shippingAddress = `${component.long_name} ${shippingAddress}`;
break;
}
case "route": {
shippingAddress += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
localityField.value = component.long_name;
break;
case "state": {
stateField.value = component.long_name;
break;
}
case "administrative_area_level_1": {
stateField.value = component.long_name;
break;
}
case "country": {
countryField.value = component.long_name;
break;
}
case "premise": {
shippingAddress2 = component.long_name;
break;
}
default:
break;
}
}
if (postcode) {
postalField.value = postcode;
}
if (shippingAddress) {
inputElement.value = shippingAddress;
}
if (shippingAddress2) {
address2Field.value = shippingAddress2;
}
}
function displayMultiSearchResponse(result) {
let shippingAddress = "";
let shippingAddress2 = "";
let postcode = "";
for (const component of result.item.address_components) {
const componentType = component.types[0];
switch (componentType) {
case "street_number": {
shippingAddress = `${component.long_name} ${shippingAddress}`;
break;
}
case "route": {
shippingAddress += component.short_name;
break;
}
case "postal_code": {
postcode = `${component.long_name}${postcode}`;
break;
}
case "postal_code_suffix": {
postcode = `${postcode}-${component.long_name}`;
break;
}
case "locality":
localityField.value = component.long_name;
break;
case "state": {
stateField.value = component.long_name;
break;
}
case "administrative_area_level_1": {
stateField.value = component.long_name;
break;
}
case "country": {
countryField.value = component.long_name;
break;
}
case "premise": {
shippingAddress2 = component.long_name;
break;
}
default:
break;
}
}
if (postcode) {
postalField.value = postcode;
}
if (shippingAddress) {
inputElement.value = shippingAddress;
}
if (shippingAddress2) {
address2Field.value = shippingAddress2;
}
}
