如何为动态生成的输入框集成Google Address API地址自动填充

Got it, let's solve this dynamic input autocomplete issue with the Google Places API. Here's how you can adapt your existing code to handle multiple, dynamically added address fields:

Core Adjustments Needed #

Your original code relies on a fixed ID (#autocomplete), which won't work for dynamic elements (since IDs must be unique). Instead, we'll:

• Use a shared class name to identify all address input boxes
• Create a reusable initialization function to bind autocomplete to any input
• Wrap each address set in a parent container to link the input with its corresponding address component fields (like street number, city, etc.)

Full Implementation Code #

1. HTML Structure (With Dynamic Add/Remove)

<!-- Initial address group -->
<div class="address-group">
  <input class="autocomplete-input" placeholder="Enter your address" type="text">
  <!-- Component fields tied to this address group -->
  <input type="text" class="street_number" placeholder="Street Number">
  <input type="text" class="route" placeholder="Street Name">
  <input type="text" class="locality" placeholder="City">
  <input type="text" class="administrative_area_level_1" placeholder="State">
  <input type="text" class="country" placeholder="Country">
  <input type="text" class="postal_code" placeholder="ZIP Code">
  <button class="remove-address">Remove Address</button>
</div>

<!-- Add address button -->
<button id="add-address">Add Address</button>

<!-- Load Google Places API (replace YOUR_API_KEY with your actual key) -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initAutocompleteSystem"></script>

2. Updated JavaScript Code

var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};

// Initialize the entire autocomplete system
function initAutocompleteSystem() {
  // Set up autocomplete for existing input boxes
  document.querySelectorAll('.autocomplete-input').forEach(input => {
    initSingleAutocomplete(input);
  });

  // Bind "Add Address" button click event
  document.getElementById('add-address').addEventListener('click', addNewAddressGroup);

  // Handle remove button clicks (event delegation for dynamic elements)
  document.body.addEventListener('click', function(e) {
    if (e.target.classList.contains('remove-address')) {
      e.target.closest('.address-group').remove();
    }
  });
}

// Initialize autocomplete for a single input element
function initSingleAutocomplete(inputElement) {
  // Create autocomplete instance for the input
  const autocomplete = new google.maps.places.Autocomplete(inputElement, { types: ['geocode'] });

  // Bind place selection event to fill component fields
  autocomplete.addListener('place_changed', function() {
    fillInAddressForGroup(this, inputElement.closest('.address-group'));
  });

  // Bind focus event to apply geolocation bias
  inputElement.addEventListener('focus', () => geolocateForAutocomplete(autocomplete));
}

// Fill component fields for a specific address group
function fillInAddressForGroup(autocomplete, addressGroup) {
  const place = autocomplete.getPlace();

  // Clear all component fields in the group
  for (const component in componentForm) {
    addressGroup.querySelector(`.${component}`).value = '';
    addressGroup.querySelector(`.${component}`).disabled = false;
  }

  // Populate fields with place details
  for (let i = 0; i < place.address_components.length; i++) {
    const addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      const val = place.address_components[i][componentForm[addressType]];
      addressGroup.querySelector(`.${addressType}`).value = val;
    }
  }
}

// Apply geolocation bias to a specific autocomplete instance
function geolocateForAutocomplete(autocomplete) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      const geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      const circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

// Create a new address group and initialize autocomplete for it
function addNewAddressGroup() {
  const newGroup = document.createElement('div');
  newGroup.className = 'address-group';
  newGroup.innerHTML = `
    <input class="autocomplete-input" placeholder="Enter your address" type="text">
    <input type="text" class="street_number" placeholder="Street Number">
    <input type="text" class="route" placeholder="Street Name">
    <input type="text" class="locality" placeholder="City">
    <input type="text" class="administrative_area_level_1" placeholder="State">
    <input type="text" class="country" placeholder="Country">
    <input type="text" class="postal_code" placeholder="ZIP Code">
    <button class="remove-address">Remove Address</button>
  `;
  document.body.insertBefore(newGroup, document.getElementById('add-address'));

  // Set up autocomplete for the new input
  initSingleAutocomplete(newGroup.querySelector('.autocomplete-input'));
}

Key Changes Explained #

• Class-based identification: Replaced the fixed #autocomplete ID with a .autocomplete-input class, so all dynamic inputs can be targeted consistently.
• Reusable initialization: The initSingleAutocomplete function handles setting up autocomplete for any input, whether it's part of the initial form or added later.
• Address group linking: Each input and its component fields are wrapped in a .address-group container. This ensures we fill the correct fields for each address, avoiding conflicts between multiple groups.
• Event delegation for deletion: Since remove buttons are dynamically generated, we bind the click event to the body element to ensure new buttons work as expected.
• Per-instance geolocation: The geolocateForAutocomplete function takes a specific autocomplete instance, so each input gets its own location bias when focused.

This setup will work for any number of dynamic address inputs you add or remove!

内容的提问来源于stack exchange，提问作者Mahek Shah