如何移除Google Maps自动补全下拉框中的部分邮政编码？

针对英国地区只保留完整邮政编码的需求，提供两种可行解决方案：

方案一：直接绑定自动补全到邮编输入框（推荐） #

这是最简单稳定的实现方式，通过将Autocomplete实例绑定到邮编输入框，并指定返回类型为邮编，从根源上避免部分邮编选项出现。

修改后的代码如下：

let autocomplete;
let address1Field;
let postalField;

function initAutocomplete() {
  address1Field = document.querySelector("#ship-address");
  postalField = document.querySelector("#postcode");

  // 将自动补全绑定到邮编输入框，限制仅返回邮编类型结果
  autocomplete = new google.maps.places.Autocomplete(postalField, {
    componentRestrictions: { country: ["gb"] },
    types: ["postal_code"],
    fields: ["address_components", "geometry"],
  });
  postalField.focus();

  autocomplete.addListener("place_changed", fillInAddress);
}

function fillInAddress() {
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  for (const component of place.address_components) {
    const componentType = component.types[0];
    switch (componentType) {
      case "street_number":
        address1 = `${component.long_name} ${address1}`;
        break;
      case "route":
        address1 += component.short_name;
        break;
      case "sublocality_level_1":
        address1 += component.long_name;
        break;
      case "postal_code":
        postcode = `${component.long_name}${postcode}`;
        break;
      case "postal_code_suffix":
        postcode = `${postcode}-${component.long_name}`;
        break;
      case "postal_town":
        document.querySelector("#postal_town").value = component.long_name;
        break;
      case "administrative_area_level_2":
        document.querySelector("#county").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  document.getElementById('details').innerHTML = `<input name="latitude" type="hidden" id="latitude" value="${place.geometry.location.lat()}"><input name="longitude" type="hidden" id="longitude" value="${place.geometry.location.lng()}">`;
}

window.initAutocomplete = initAutocomplete;

关键改动：

• 将Autocomplete绑定到邮编输入框postalField
• 添加types: ["postal_code"]参数，强制API仅返回完整邮政编码结果

方案二：过滤地址输入框的部分邮编选项 #

若必须保留地址输入框的自动补全功能，可通过自定义预测结果过滤，移除仅显示部分邮编的选项。

实现代码如下：

let autocompleteService;
let address1Field;
let postalField;
let dropdown;

function initAutocomplete() {
  address1Field = document.querySelector("#ship-address");
  postalField = document.querySelector("#postcode");
  
  // 创建自定义下拉容器
  dropdown = document.createElement("div");
  dropdown.className = "autocomplete-dropdown";
  address1Field.parentNode.appendChild(dropdown);

  autocompleteService = new google.maps.places.AutocompleteService();
  
  // 监听输入事件，获取并过滤预测结果
  address1Field.addEventListener("input", function() {
    const query = this.value;
    if (!query) {
      dropdown.innerHTML = "";
      return;
    }

    autocompleteService.getPlacePredictions({
      input: query,
      componentRestrictions: { country: ["gb"] },
      types: ["address"]
    }, function(predictions, status) {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        dropdown.innerHTML = "";
        return;
      }

      // 过滤仅包含部分邮编的结果（匹配英国完整邮编格式）
      const filteredPredictions = predictions.filter(prediction => {
        const fullPostcodeRegex = /[A-Z]{1,2}[0-9][A-Z0-9]? [0-9][A-Z]{2}/i;
        return !prediction.description.match(/\b[A-Z0-9]{1,4}\b$/i) || prediction.description.match(fullPostcodeRegex);
      });

      // 渲染过滤后的选项
      dropdown.innerHTML = filteredPredictions.map(prediction => `
        <div class="autocomplete-option" data-place-id="${prediction.place_id}">${prediction.description}</div>
      `).join("");

      // 绑定选项点击事件
      dropdown.querySelectorAll(".autocomplete-option").forEach(option => {
        option.addEventListener("click", function() {
          const placeId = this.dataset.placeId;
          const placesService = new google.maps.places.PlacesService(document.createElement("div"));
          placesService.getDetails({
            placeId: placeId,
            fields: ["address_components", "geometry"]
          }, function(place, status) {
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              fillInAddress(place);
            }
            dropdown.innerHTML = "";
          });
        });
      });
    });
  });

  // 点击页面其他区域关闭下拉框
  document.addEventListener("click", function(e) {
    if (!address1Field.contains(e.target) && !dropdown.contains(e.target)) {
      dropdown.innerHTML = "";
    }
  });
}

function fillInAddress(place) {
  let address1 = "";
  let postcode = "";

  for (const component of place.address_components) {
    const componentType = component.types[0];
    switch (componentType) {
      case "street_number":
        address1 = `${component.long_name} ${address1}`;
        break;
      case "route":
        address1 += component.short_name;
        break;
      case "sublocality_level_1":
        address1 += component.long_name;
        break;
      case "postal_code":
        postcode = `${component.long_name}${postcode}`;
        break;
      case "postal_code_suffix":
        postcode = `${postcode}-${component.long_name}`;
        break;
      case "postal_town":
        document.querySelector("#postal_town").value = component.long_name;
        break;
      case "administrative_area_level_2":
        document.querySelector("#county").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  document.getElementById('details').innerHTML = `<input name="latitude" type="hidden" id="latitude" value="${place.geometry.location.lat()}"><input name="longitude" type="hidden" id="longitude" value="${place.geometry.location.lng()}">`;
}

window.initAutocomplete = initAutocomplete;

配套基础样式（可选）：

.autocomplete-dropdown {
  position: absolute;
  background: white;
  border: 1px solid #ccc;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}
.autocomplete-option {
  padding: 8px 12px;
  cursor: pointer;
}
.autocomplete-option:hover {
  background: #f0f0f0;
}

方案对比 #

优先选择方案一，它利用Google API原生参数限制结果类型，实现简单、维护成本低，且稳定性更高；方案二需自定义渲染下拉框，适合必须保留地址输入框自动补全的场景。

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