Bind google Adresse Autocomplete API auf dynamisch erstellen Eingabe

Question

Grundsätzlich erstelle ich dynamische Felder zum Beispiel gibt es 10 Felder mit der jQuery. Und ich möchte Google Address Autocomplete auf alle 10 dynamisch erstellten Felder hinzufügen. Aber dieser Code funktioniert nicht.

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')); 

Ich bekomme diesen Fehler mit dem obigen Code. 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

$ ('Selektor ') gibt Ihnen ein jquery Element, aber Sie wollen, dass die zugrunde liegende Eingabe $ so versuchen ('. Asd') [0] oder schlicht JavaScript verwenden

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

Answer 3

Sie können versuchen, in reinen JS

Fiddle Demo

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>