Lier l'adresse de google autocomplete api sur dynamiquement créer l'entrée

Question

Fondamentalement je crée des champs dynamiques par exemple il peut y avoir 10 champs en utilisant le jquery. Et je veux ajouter l'auto-complétion de google address sur les 10 champs créés dynamiquement. Mais ce code ne fonctionne pas.

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

Je reçois cette erreur avec le code ci-dessus. 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

$ ('sélecteur ') vous donne un élément jquery, mais vous voulez l'entrée sous-jacente alors essayez $ ('. Asd') [0] ou utiliser JavaScript plaine

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

Answer 3

Vous pouvez essayez de JS pur

Fiddle démo

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>