Source: https://developers.woosmap.com/products/multisearch-lib/js/samples/autofill-address-form/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Woosmap MultiSearch Autofill Address Form



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.

https://demo.woosmap.com/js-samples/samples/multisearch-address-form-autofill/app/dist/
[](https://demo.woosmap.com/js-samples/samples/multisearch-address-form-autofill/highlight/highlight.html "Open in new tab with highlighted code")
Try sample 

- [CodeSandbox](https://codesandbox.io/p/devbox/github/woosmap/js-samples/tree/master/dist/samples/multisearch-address-form-autofill/app?file=index.ts)
- [JsFiddle](https://jsfiddle.net/gh/get/library/pure/woosmap/js-samples/tree/master/dist/samples/multisearch-address-form-autofill/jsfiddle)
- [Clone on Github](https://github.com/Woosmap/js-samples/tree/sample/multisearch-address-form-autofill)

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:

```typescript
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;
  }
}
```

```javascript
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;
  }
}
```