谷歌地方自动完成：只允许自动完成建议的地址

Question

我有一个用户可以输入地址的输入字段。我正在使用Place Autocomplete向用户建议地址。位置是必填字段。

我想要的是确保用户只能输入Place Autocomplete建议的地址。因此，例如，他们无法将表单提交为“asagasagaaa”作为位置。

EJS FILE：

<input name="location" type="text" id="location"> 

js文件：

$(document).ready(function() { 
    ... 
    var autocomplete = new google.maps.places.Autocomplete($('#location')[0]); 
    addLocationChangeListener(autocomplete); 
    ... 
    $("form").submit(function(e){ 
     doValidations(e, autocomplete); 
    }); 

}); 

addLocationChangeListener：

// When user changes location, update map coordinates 
function addLocationChangeListener(autocomplete) { 
    autocomplete.addListener('place_changed', function() { 
     console.log("PLACE CHANGED"); 
     var place = autocomplete.getPlace(); 
     console.log("PLACE: ", place); 
     console.log("---------------------"); 
     if(place && place.geometry) { 
      ... // save stuff 
     } 
     ... 
    }); // End Add Listener 
} 

我遇到的问题是，它似乎像$（“＃位置） .val（）和autocomplete.getPlace（）不同步 - 即它们不总是具有相同的值。

因此，该好好尝试一下工作

$("#location").on("blur", function() { 
     if(autocomplete.getPlace() === undefined) { 
      //display error, prevent form submission 
    } 
}); 

例如，假设您输入以下顺序：

AAA（无效位置）

没有地方改变事件将被触发。 Place未定义，$（“＃location”）是“aaa”。这可以。

19锦绣大道（假设这是一个位置谷歌建议）

$（ “＃位置”）。VAL（）是19锦绣大道。地点是19 Fairview大街。现在一切都很好。

AAA（无效位置） - 的问题是在这里

$（ “＃位置”）VAL（）是AAA。地点是19 Fairview大街。问题！

看到不匹配？关于如何解决这个问题的任何想法？

Answer 1

想通了。我使用setTimeout，所以它是一种黑客，我不喜欢它。如果你有更好的解决方案，请告诉我。

$(document).ready(function() { 
    $("#location").on("blur", function() { 
    setTimeout(function() { 
     var locVal = $("#location").val(); 
     var place = autocomplete.getPlace(); 
     if(!place) { 
      var errMsg = locVal + " is not a valid location. Please select location from list."; 
      displayError($("#location"), errMsg); 
     } else if(place.formatted_address === locVal) { 
      console.log("MATCH"); 
     } else { 
      var errMsg = locVal + " is not a valid location. Please select location from list."; 
      displayError($("#location"), errMsg); 
     } 
    },200); 
    }); 
} 

// When user changes location, update map coordinates 
function addLocationChangeListener(autocomplete) { 
    autocomplete.addListener('place_changed', function() { 
    var place = autocomplete.getPlace(); 
     if(place && place.geometry) { 
      $("#location").val(place.formatted_address); // THis is key 
     } 
     ... 
    }); // End Add Listener 
}