Автозаполнение нескольких мест на одной странице - PullRequest
Новая
       27

Автозаполнение нескольких мест на одной странице

0 голосов
/ 30 марта 2020

Я хочу, чтобы на одной странице было 2 формы автозаполнения Google.

Мне удалось получить две формы для отображения на одной странице, используя следующий код.

Поля автозаполнения заполняются на каждом, но при переходе на страницу результатов информация об адресе не запрашивает форму №2. Это работает только для № 1.

ЗДЕСЬ ФОРМА 1: 

<form method="get" action="/homes">
            <input type="hidden">
 <body onload="initialize()">
            <div class="sr-minmax-filters">
              <div class="sr-search-field" id="sr-search-keywords">
               <input 
                    type="text" 
                       placeholder="Search by address, city or ZIP code"
                       value="" class="form-control" id="autocomplete"  onFocus="geolocate()" />
              </div>
              <div class="sr-search-field" id="sr-search-ptype">
                <input class="submit button btn" type="submit" value="Search">
              </div>
            </div>
            <div>
            </div>
            <input type="hidden" name="sr_cities" id="locality" value="$locality" />
            <input type="hidden" name="sr_postalCodes" id="postal_code" value="$postalCodes" />
            <input type="hidden" name="sr_keywords" id="street_number" value="$street_number" />
          </form>

ЭТО ФОРМА 2: 

<form action="/value-estimator/address-confirmation/" class="form-inline" id="cse-search-box">
  <body onload="initialize()">
       <div class="sr-minmax-filters">
              <div class="sr-search-field" id="sr-search-keywords">
                <input class="form-control" id="autocomplete2" placeholder="Enter your address" type="text" onfocus="geolocate()">

            </div>
<div class="sr-search-field" id="sr-search-ptype">
                <input class="submit button btn" type="submit" value="Get Started">
              </div>
<input type="hidden" name="city" id="locality" />
<input type="hidden" name="adr" id="street_number" />
<input type="hidden" name="adr1" id="route"/>
<input type="hidden" name="state" id="administrative_area_level_1" />
<input type="hidden" name="country" id="country" />
 <input type="hidden" name="postalCodes" id="postal_code" />

        </div>

     </form>

ЗДЕСЬ СКРИПТ GOOGLE 

 <script src="https://maps.googleapis.com/maps/api/js?key=*****************&libraries=places&callback=initAutocomplete&region=us"></script>
    <script>

 var placeSearch, autocomplete2;
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'
};

 var placeSearch, autocomplete;
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'
};


function initialize() {

autocomplete2 = new google.maps.places.Autocomplete(document.getElementById('autocomplete2'), { types: [ 'geocode' ] });
google.maps.event.addListener(autocomplete2, 'place_changed', function() {
  fillInAddress();
});

  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}

function fillInAddress() {
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}
    </script>
...