我有一个输入字段,用户可以在其中输入地址。我正在使用Place Autocomplete向用户推荐地址。位置是必填字段。
我想要的是确保用户只能输入地点自动填充建议的地址。因此,例如,他们无法以“asagasagaaa”作为位置提交表单。
EJS文件:
<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
}
我遇到的问题是,似乎$(“#location).val()和autocomplete.getPlace()不同步 - 即,它们并不总是具有相同的值。
因此,这不起作用
$("#location").on("blur", function() {
if(autocomplete.getPlace() === undefined) {
//display error, prevent form submission
}
});
例如,假设您输入以下序列:
aaa(无效位置)
不会触发任何地方更改事件。地方未定义,$(“#location”)是“aaa”。这很好。
19 Fairview ave(假设这是谷歌建议的位置)
$(“#location”)。val()是19 Fairview ave。地方是19 Fairview ave。一切都很好。
aaa(无效位置) - 问题出在此处
$(“#location”)。val()是aaa。地方是19 Fairview ave。问题!
看到不匹配?关于如何解决这个问题的任何想法?
答案 0 :(得分:-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
}