谷歌地方自動完成：只允許自動完成建議的地址

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 
}