Google Place 自动完成地址 API 强制 HTML 自动完成 = 关闭

Question

我们有一个标准的地址表格(街道1，街道2，城市，州，邮政编码，国家(。

当我在街道 1 上添加 Google 放置自动完成 API 的代码时，它会在加载页面时自动将自动完成的输入字段更改为关闭，这使得 HTML/浏览器自动填充在街道 1 上不起作用。

<input autocomplete="address-line1" type = "text" name = "shipping_address_1" id = "shipping_address_1"   class="ct-required form-control" tabindex=7>

关于如何纠正此问题的任何想法;为什么Google Place Autcomplete API会将字段更改为autocomplete='off'？

我试图将谷歌javascript变量"autocomplete"修改为"autocomp"，认为它与那个结果有关，但仍然是一样的结果。

var placeSearch, autocomp;
var componentForm = {
shipping_address_1: 'short_name',
shipping_address_2: 'long_name',
shipping_city: 'long_name',
shipping_state: 'short_name',
shipping_country: 'long_name',
shipping_zip: 'short_name'
};

function initAutocomplete() {
// Create the autocomplete object, restricting the search to geographical
// location types.
autocomp = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('shipping_address_1')),
{
types: ['geocode'],
componentRestrictions: {country: "us"}
});
// When the user selects an address from the dropdown, populate the address
// fields in the form.
autocomp.addListener('place_changed', fillInAddress);
}
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomp.getPlace();
//debug autofillinplaes
console.log(place);

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}
if (place.address_components) {
// Get each component of the address from the place details
// and fill the corresponding field on the form.
var components_by_type = {};
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
var c = place.address_components[i];
components_by_type[c.types[0]] = c;
}
var streetnumb = components_by_type['street_number'].short_name;
var address1 = streetnumb+" "+components_by_type['route'].long_name;
document.getElementById('shipping_address_1').value = address1;
var locality = components_by_type['locality'].long_name;     
document.getElementById('shipping_city').value = locality;
var administrative_area_level_1 = components_by_type['administrative_area_level_1'].short_name;      
document.getElementById('shipping_state').value = administrative_area_level_1;
var country = components_by_type['country'].short_name;             
document.getElementById('shipping_country').value = country;
var postal_code = components_by_type['postal_code'].short_name;         
document.getElementById('shipping_zip').value = postal_code;
... [DO ADDRESS VALIDATION, UPDATE INPUT FIELDS] ...}

Answer 1

autocomp = new google.maps.places.Autocomplete(
document.getElementById('shipping_address_1')),
{
types: ['geocode'],
componentRestrictions: {country: "us"}
});

通过编写上面的代码，你告诉GMaps这是你需要预测地点的字段。 它有点像地点的搜索栏，任何类型的搜索栏都不会有自动完成功能。如果它被浏览器自动填充，那就没有任何意义了。

如果你想这样，请使用WebService API，发送HTTP请求并用其响应填充字段。

从文档中， 请求在加利福尼亚州旧金山为中心的区域内包含字符串"Amoeba"的场所：https://maps.googleapis.com/maps/api/place/autocomplete/xml?input=Amoeba&types=establishment&location=37.76999,-122.44696&strictbounds&key=YOUR_API_KEY对上述带有查询参数的 URL 的 GET 请求input=Paris&types=geocode将给出一个包含预测的 JSON 对象。

{
"status": "OK",
"predictions" : [
{
"description" : "Paris, France",
"id" : "691b237b0322f28988f3ce03e321ff72a12167fd",
"matched_substrings" : [
{
"length" : 5,
"offset" : 0
}
],
... more results
]
}