В этой статье блога мы рассмотрим различные методы создания двух контейнеров PAC (Place Autocomplete) на одной странице с помощью Google Autocomplete. Мы углубимся в некоторые примеры кода и подробно объясним каждый метод. Итак, давайте начнем и улучшим возможности автозаполнения!

Метод 1. Использование двух отдельных экземпляров автозаполнения
Самый простой способ создать два PAC-контейнера — инициализировать два отдельных экземпляра службы автозаполнения, предоставляемой API Google Адресов.

HTML:

<div id="pac-container-1">
  <input id="autocomplete-1" type="text" placeholder="Search Location 1">
</div>
<div id="pac-container-2">
  <input id="autocomplete-2" type="text" placeholder="Search Location 2">
</div>

JavaScript:

var autocomplete1 = new google.maps.places.Autocomplete(
  document.getElementById("autocomplete-1")
);
var autocomplete2 = new google.maps.places.Autocomplete(
  document.getElementById("autocomplete-2")
);

Метод 2: использование одного экземпляра автозаполнения с настраиваемыми полями ввода.
В этом методе мы можем использовать один экземпляр автозаполнения и настроить поля ввода, чтобы различать два контейнера PAC.

HTML:

<div class="pac-container">
  <input class="autocomplete" id="autocomplete-1" type="text" placeholder="Search Location 1">
</div>
<div class="pac-container">
  <input class="autocomplete" id="autocomplete-2" type="text" placeholder="Search Location 2">
</div>

JavaScript:

var input1 = document.getElementById("autocomplete-1");
var input2 = document.getElementById("autocomplete-2");
var autocomplete = new google.maps.places.Autocomplete(input1);
input2.addEventListener("focus", function () {
  autocomplete.setFields({ input: input2 });
  autocomplete.addListener("place_changed", function () {
    // Handle place selection for Location 2
  });
});

Метод 3. Использование пользовательских прослушивателей событий
Этот метод предполагает создание пользовательских прослушивателей событий для управления поведением автозаполнения для каждого контейнера PAC.

HTML:

<div class="pac-container">
  <input class="autocomplete" id="autocomplete-1" type="text" placeholder="Search Location 1">
</div>
<div class="pac-container">
  <input class="autocomplete" id="autocomplete-2" type="text" placeholder="Search Location 2">
</div>

JavaScript:

var input1 = document.getElementById("autocomplete-1");
var input2 = document.getElementById("autocomplete-2");
input1.addEventListener("focus", function () {
  // Initialize Autocomplete for Location 1
});
input2.addEventListener("focus", function () {
  // Initialize Autocomplete for Location 2
});

Следуя любому из описанных выше методов, вы можете легко создать два контейнера PAC на одной странице с помощью автозаполнения Google. Независимо от того, выберете ли вы отдельные экземпляры, настраиваемые поля ввода или настраиваемые прослушиватели событий, теперь у вас есть знания, которые помогут улучшить качество автозаполнения для ваших пользователей.

Не забудьте включить необходимые сценарии API Google Адресов и убедиться, что у вас есть действительный ключ API для успешной реализации. Приятного программирования и изучения захватывающих возможностей Google Autocomplete!