google yerleri liste öğeleri

Question

var start = new google.maps.places.Autocomplete(
 
    (document.getElementById('start')), { 
 
     types: ['geocode'] 
 
    });

<input id="start" placeholder="Where to begin?" type="text" /> 
 

 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

Google bir metin alanında çalışan otomatik tamamlama yerleştirir alabilirsiniz içinde yeni oluşturulan girişlerine otomatik tamamlanır ekleyin.

Bu alanları lı olarak oluşturmak ve her alanda otomatik tamamlama özelliğini eklemek için bir düğme istiyorum.

document.getElementById('addplace').addEventListener('click', function() { 
 
    addplace(); 
 
    }); 
 

 
var j=1; 
 
function addplace() { 
 
    var node = document.createElement("li"); 
 
    node.innerHTML = "<input id='place" + j +"' placeholder='Pit stop " + j + "' onFocus='geolocate()' type='text' />";    
 
    document.getElementById("waypoints").appendChild(node); 
 
    j++; 
 
}

<input type="submit" id="addplace" value="Add One!"> 
 
<ul id="waypoints"></ul> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script>

Yani kimliği oluşturulan girdilerin en şunlardır Place1, Place2 vb

İçine

var place"+j+" = new google.maps.places.Autocomplete(
(document.getElementById('place"+j+"')), { 
    types: ['geocode'] 
}); 

ekleyerek çalıştı: Burada otomatik tamamlama çalışma olmadan bir örnektir addplace işlevinin tanımı ancak tüm javascript'inin devre dışı kalmasına neden oluyor gibi görünüyordu (harita artık hiç gösterilmiyordu). Emin değilim neden; Google'ın onu engellediğini düşünmüyorum. Belki bir sözdizimi hatası yapıyorum ya da "+ j +" yeri bir değişkene isim vermek için doğru bir yol değil mi?

Oluşturulan her giriş alanına otomatik tamamlama yerlerinin otomatik olarak eklenmesiyle ilgili yardımlarınız için teşekkür ederiz.

GÜNCELLEME: Bu soruyu Google Places Autocomplete doesn't work on dynamically generated input elements farkettim ve burada denemek ve uygulamak için çalışacağım ama bu örnekte gerekenden daha karmaşık olabilecek ajax ve diğer şeylerin kullanımını fark ettim. Yani bir cevapta http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js referans alırlar. eğer bunu jQuery olmadan yapabilirim ki bu benim için güzel ya da belki daha açık ya da eğitici olurdu, çünkü kısmi çözümümün en azından yakın olduğu/bazı düzeltmelerle doğru olabileceğini düşündüğümden?

Answer 1

Bunun aradığınız şey olduğunu tahmin:

1). Belirli id numaralı düğmeye ekleyin. Sonra tüm Otomatik Tamamlama girişlerinizi sarmak için (id = "waypoints" ile) öğelerini kullanın.

2). Daha sonra click event öğesini id's numaralı dinamikle Otomatik Tamamlama Girişlerini oluşturan düğmeye ekleyin.

3). Şimdi (burada ul) eleman içindeki girişler oluşturulan tüm olanlar için bir tıklama etkinliğini (varsa) oluşturmakid(burada id = "waypoints") ve aynı anda tıklandığında Autcomplete Girişine göre autcomplete örneğini oluşturmak zorunda.

Pasajı:

var totalAC = 0; 
 
$(document).on('click', "#waypoints input[type=text]",function() { 
 
\t var currentInp = $(this).attr("id"); 
 
\t var placeBox = new google.maps.places.Autocomplete(document.getElementById(currentInp)); 
 
}); 
 

 
$("#newAutocomplete").click(function(){ 
 
\t totalAC = $("#waypoints input").length; 
 
\t totalAC = totalAC + 1; 
 
\t var codeVar = "<li><input id='place" + totalAC + "' placeholder='Where to begin?' type='text' /></li>"; 
 
\t $("#waypoints").append(codeVar); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places"></script> 
 

 
<button id="newAutocomplete">Add One+</button> 
 
<ul id="waypoints"> 
 

 
</ul>