Google Place自动填充功能:仅允许自动填充建议的地址

时间:2017-10-18 14:25:59

标签: javascript jquery node.js autocomplete google-places-api

我有一个输入字段,用户可以在其中输入地址。我正在使用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。问题!

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

1 个答案:

答案 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
}