在动态创建输入时绑定谷歌地址自动完成api答案

【问题标题】：Bind google address autocomplete api on dynamically create input在动态创建输入时绑定谷歌地址自动完成api
【发布时间】：2017-08-04 05:13:55
【问题描述】：

基本上我正在创建动态字段，例如使用 jquery 可能有 10 个字段。我想在所有 10 个动态创建的字段上添加谷歌地址自动完成功能。但是这段代码不起作用。

var html += '<div class="form-group">';
html += '<label class="control-label">'+field.label+'</label>';
html += '<input class="form-control address-auto-complete" 

name="'+field.name+'[]" type="text" />';
html += '</div>';
$('#load-case-fields').html(html);
var a = new google.maps.places.Autocomplete($('.address-auto-complete'));

我在上面的代码中遇到了这个错误。 InvalidValueError: not an instance of HTMLInputElement

【问题讨论】：

标签： jquery html autocomplete google-places-api google-geolocation

【解决方案1】：

$('.selector') 给你一个 jquery 元素，但你想要底层的输入，所以试试 $('.asd')[0] 或使用纯 JavaScript

var input = document.getElementById('yourInput');
var autocomplete = new google.maps.places.Autocomplete(input);

【讨论】：

【解决方案2】：

你可以用纯JS试试

Fiddle演示

function initialize() {

  parentDiv = document.getElementById('variable');
  for (var i = 0; i < 10; i++) { //dynamically create 10 inputs
    var formGroupDiv = document.createElement('div')
    formGroupDiv.classList.add('form-group')
    parentDiv.appendChild(formGroupDiv)
    var labels = document.createElement('label')
    labels.classList.add('control-label')
    labels.innerHTML = 'LABEL ' + i
    formGroupDiv.appendChild(labels)
    var input = document.createElement('input');
    input.classList.add('form-control', 'address-auto-complete')
    input.setAttribute('placeholder', "Enter your address")
    input.setAttribute('type', "text")
    formGroupDiv.appendChild(input)
  }
  var variableAuto = document.getElementsByClassName('address-auto-complete');
  for (var j = 0; j < variableAuto.length; j++) { //dynamically initialize autocomplete to input elements
    new google.maps.places.Autocomplete(
      (variableAuto[j]), {
        types: ['geocode']
      });
  }

}

initialize();

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-sm-12" id="variable">

</div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

【讨论】：