Google Places Autocomplete限制带门牌号地址及仅允许选中建议提交实现问询

功能1：限制返回地址建议必须包含街道门牌号 #

修改Autocomplete初始化的types参数即可，Google Places API的street_address类型专门指代包含完整门牌号的街道级地址，不会返回仅包含街道名、城市名的粗粒度结果。
将原配置中types: ["address"]直接替换为types: ["street_address"]即可满足要求。

功能2：限制仅选中自动补全建议才可提交表单 #

通过状态标记+表单拦截逻辑实现：

• 新增全局变量标记用户是否选中了官方建议的地址
• 监听地址输入框的手动输入事件，只要用户手动修改内容就将标记置为未选中状态
• 选中自动补全建议触发place_changed回调时，将标记置为已选中状态
• 绑定表单的submit事件，提交前校验标记状态，未选中则阻止提交并提示错误

完整修改后可运行代码 #

<!DOCTYPE html>
<html>
<body>

<form id="addressForm">
   <input id="customerAddress" name="customerAddress" required autocomplete="off" />
   <input id="zip" name="zip" required readonly />
   <input id="city" name="city" required readonly />
   <button type="submit">提交</button>
</form>
<div id="errorTip" style="color: red; display: none;">请从自动补全列表中选择有效地址</div>

    <script
      src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initAutocomplete&libraries=places"
      async
    ></script>
    
    <script>
        let autocomplete;
        // 新增：地址选中状态标记
        let isPlaceSelected = false;
        const errorTip = document.querySelector("#errorTip");
        const addressForm = document.querySelector("#addressForm");
        const customerAddressInput = document.querySelector("#customerAddress");
        
        function initAutocomplete() {
         
          autocomplete = new google.maps.places.Autocomplete(customerAddressInput, {
            componentRestrictions: { country: ["de", "DE"] },
            fields: ["address_components", "geometry"],
            // 功能1修改：替换address为street_address，仅返回带门牌号的地址
            types: ["street_address"],
          });
          autocomplete.addListener("place_changed", fillInAddress);

          // 新增：监听用户手动输入事件
          customerAddressInput.addEventListener('input', () => {
            isPlaceSelected = false;
            errorTip.style.display = 'none';
          })

          // 新增：表单提交拦截校验
          addressForm.addEventListener('submit', (e) => {
            if(!isPlaceSelected) {
              e.preventDefault();
              errorTip.style.display = 'block';
            }
          })
        }
        
        function fillInAddress() {
          
          const place = autocomplete.getPlace();
          // 兼容异常情况：如果选中的地址没有返回地址组件，视为无效
          if (!place.address_components) {
            isPlaceSelected = false;
            errorTip.style.display = 'block';
            return;
          }
          // 选中有效地址，更新标记
          isPlaceSelected = true;
          errorTip.style.display = 'none';

          var address = ""
          var streetNumber = ""
        
          
          for (const component of place.address_components) {
            const componentType = component.types[0];
            
            switch (componentType) {

              case "route": {
                address = component.long_name;
                break;
              }
              
              case "street_number": {
                  streetNumber = component.long_name
                  break;
                }
        
              case "postal_code": {
                document.querySelector("#zip").value = component.long_name;
                break;
              }
        

              case "locality":
                document.querySelector("#city").value = component.long_name;
                break;

            }
          }
        
        customerAddressInput.value = address +" "+streetNumber
                  
          
        }
    </script>
  </body>
</html>

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