谷歌仅自动完成带有压力数字的建议

Question

I am working with googles api places for address autocomplete suggestions.我正在与 googles api 位置合作以获取地址自动完成建议。 This is my simple working code:这是我的简单工作代码：

<!DOCTYPE html>
<html>
<body>

<form>
   <input id="customerAddress" name="customerAddress" required autocomplete="off" />
   <input id="zip" name="zip" required readonly />
   <input id="city" name="city" required readonly />
</form>

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

        let autocomplete;
        
        function initAutocomplete() {
         
          autocomplete = new google.maps.places.Autocomplete(document.querySelector("#customerAddress"), {
            componentRestrictions: { country: ["de", "DE"] },
            fields: ["address_components", "geometry"],
            types: ["address"],
          });
          autocomplete.addListener("place_changed", fillInAddress);
        }
        
        function fillInAddress() {
          
          const place = autocomplete.getPlace();
          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;

            }
          }
        
        document.querySelector("#customerAddress").value = address +" "+streetNumber
                  
          
        }
    </script>
  </body>
</html>

Now I would realize the following situation:现在我会意识到以下情况：

the customer should write his address into the field "customerAddress" to get the suggestions, but the address have to include a street number.客户应该将他的地址写入“customerAddress”字段以获取建议，但地址必须包含街道号码。 how can I restrict this?我怎样才能限制这个？
The form should only be able to be submitted, if the customer selected a suggestions from the autocomplete list.如果客户从自动完成列表中选择了建议，则只能提交表单。 If he / she write manually a address, which doesn't is from the autocomplete list, it has to be an error如果他/她手动写了一个地址，该地址不是来自自动完成列表，则必须是一个错误

Answer 1

Well, I think the best solution would be to have separate hidden input where you would put selected address which you would run validation against, if it is not defined you simply return error.好吧，我认为最好的解决方案是有单独的隐藏输入，您可以在其中放置要对其运行验证的选定地址，如果未定义，则只需返回错误即可。

As for having street number you can also run the validation of selected Place.至于有街道号码，您还可以运行所选地点的验证。 If it has selected type street_number it is valid, if not it's not.如果它选择了类型street_number它是有效的，否则它不是。

I am not sure if you can disable Google to restricts search results to only addresses with street number.我不确定您是否可以禁用 Google 以将搜索结果限制为仅包含街道号码的地址。

谷歌仅自动完成带有压力数字的建议

问题描述

1 个解决方案

解决方案1
0 2021-11-01 20:08:39

谷歌仅自动完成带有压力数字的建议

问题描述

1 个解决方案

解决方案1 0 2021-11-01 20:08:39

解决方案1
0 2021-11-01 20:08:39