So fügen Sie die automatische Vervollständigung des Arbeitsplatzes hinzu, indem Sie den Parameter übergeben

Question

Ich bin nicht in der Lage, eine automatische Vervollständigung zu bekommen, also was soll ich tun?

<input class="form-control" name="loc[]" onkeypress="return initialize(input);" required> 

js Code:

function initialize(input) { 

var autocomplete = new google.maps.places.Autocomplete(input); 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

Answer 1

Sie brauchen nicht onkeypress Ereignis hinzuzufügen, Autocomplete wird, dass für Sie. Übergeben Sie einfach Ihr input Element und einige options an den Autocomplete Konstruktor.

Beispiel:

var input = document.getElementById('searchTextField'); 
 
var options = { 
 
    types: ['(cities)'], 
 
    componentRestrictions: {country: 'us'} 
 
}; 
 

 
autocomplete = new google.maps.places.Autocomplete(input, options);

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

 
<input id="searchTextField" type="text" size="50" placeholder="Cities in US">

- Update - input Elemente dynamisch erstellt.

var form = document.getElementsByTagName('form')[0]; 
 
var options=[{placeholder:"Cities in US",options:{types:["(cities)"],componentRestrictions:{country:"us"}}},{placeholder:"Cities in FR",options:{types:["(cities)"],componentRestrictions:{country:"fr"}}}]; 
 

 
function addAutocomplete (elem, options) { 
 
    autocomplete = new google.maps.places.Autocomplete(elem, options); 
 
} 
 

 
function crateAutoCompleteInputs (count, optoins) { 
 
    for (var i = 0; i < count; i++) { 
 
    var input = document.createElement('input'); 
 
    input.type = 'text'; 
 
    input.placeholder = optoins[i].placeholder; 
 
    form.appendChild(input); 
 
    addAutocomplete(input, options[i].options) 
 
    } 
 
} 
 

 
crateAutoCompleteInputs(2, options)

input { 
 
    margin-right: 12px; 
 
}

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

 
<form></form>