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:

onSelection: async (feedback) => {
    const { id, api } = feedback.selection.value;
    let shippingAddress = ""
    let postcode = "";
    try {
      const result = await multisearchInstance.detailsMulti({ id, api });
      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":
            document.querySelector("#locality").value = component.long_name;
            break;

          case "state": {
            document.querySelector("#state").value = component.long_name;
            break;
          }
          case "administrative_area_level_1": {
            document.querySelector("#state").value = component.long_name;
            break;
          }
          case "country": {
            document.querySelector("#country").value = component.long_name;
            break;
          }
          default:
            break;
        }
      }
      postalField.value = postcode;
      document.querySelector("#inputAddress").value = shippingAddress;
      address2Field.focus();
    } catch (error) {
      alert(error);
    }
  }
  
Was this article helpful?
Have more questions? Submit a request