如何使用getElementsByClass選擇兩個輸入域？

Question

我有2個輸入字段和自動完成的地方工作只在一個輸入字段，我知道getElementById只適用於1 ID，我試過getElementsbyClass但不起作用。

我該如何讓它在兩個輸入字段都可以工作？

html代碼

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script> 
<input id="autocomplete" name=origin type=text placeholder=Vertreklocatie> 
<input id="autocomplete2" name=destination type=text placeholder=Bestemming> 

js代碼

function initialize() { 
    var input = document.getElementById('autocomplete'); 
    var options = {componentRestrictions: {country: 'nl'}}; 

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

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

http://codepen.io/anon/pen/EjvWLE

在此先感謝

Answer 1

var input = document.getElementsByClassName('autocomplete'); 

應該工作。它返回一個數組。所以你通過他們必須循環，或者通過指數即[0]

Answer 2

您可以使用getElementsByClassName方法得到它，但你通過項目

這裏是一個更新的codepen需要循環。 http://codepen.io/anon/pen/WvEpKx

function initialize() { 
    var inputs = document.getElementsByClassName('autocomplete'); 
    var options = {componentRestrictions: {country: 'nl'}}; 

    for(var i = 0; i < inputs.length; i++){ 
     new google.maps.places.Autocomplete(inputs[i], options); 
    } 
} 

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