Question

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

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

Answer 1

I can use with juery
 see this fiddle Demo [https://jsfiddle.net/zzz4w5cn/1/][1]
 Its Working Fine..

https://jsfiddle.net/zzz4w5cn/1/

Answer 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>

Answer 3

$（＆＃39; .selector＆＃39;）为您提供了一个jquery元素，但您想要基础输入，所以请尝试$（＆＃39; .asd＆＃39;）[0]或使用纯JavaScript

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

绑定谷歌地址自动完成API动态创建输入

3 个答案: