javascript - 如何使用 getElementsByClassname 选择两个输入字段？

Question

我有 2 个输入字段，并且地点的自动完成功能仅适用于 1 个输入字段，我知道 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

您可以使用 getElementsByClassName，但需要循环遍历项目

这是更新的代码笔。 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);