基于多类的Google自动完成搜索框

Question

我正在构建一个表单，其中我需要的字段之一是谷歌地图位置自动完成搜索框。现在，这些搜索框是动态添加的，它们可能位于具有不同ID的不同页面上。

现在，看看前面问题中的例子，下面是我所做的：

HTML：

<input id="{{some generated ID}}" class="mapTypeField" type="text" size="50">

JavaScript

mapFields = document.getElementsByClassName('mapTypeField');

for (var i=0; i<mapFields.length; i++) {
    function initialize() {
        var input = mapFields[i];
        var autocomplete = new google.maps.places.Autocomplete(input);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
}

它给出了以下错误：

InvalidValueError:不是HTMLInputElement的一个实例 _.ab @ js?v=3.exp&sensor=false&libraries=places:32

我对JS不是很在行，我会犯什么错误？还有，有别的办法来做我想做的事吗？

Answer 1

这应该是可行的：

改变这一点：

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

至：

var autocomplete = new google.maps.places.Autocomplete(input[i]);

这里是一个工作JSFiddle https://jsfiddle.net/rdawkins/69Luo215/2/