Django使用谷歌地图自动建议将表单动态添加到表单集中

Question

我有一个javascript将动态表单添加到Django的表单集中，并且可以正常工作

<input type="button" value="Add form" id="add_more">

<script>
    $('#add_more').click(function () {
        var form_idx = $('#id_parties-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_parties-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
    ;
</script>

通过单击添加表单，它将为我的Django表单集再添加一个表单。

但是由于我的表单是空的，所以我有一个字段可以自动使用google map：

<script>
    function initialize() {
        var input_location = document.getElementById('id_parties-__prefix__-location');
        var autocomplete = new google.maps.places.Autocomplete(input_location);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

如何以这种额外的形式使其适用于位置字段？

---

编辑：

简而言之为空形式：

<div class="col-sm-12">
    <div class="form-group">
        <label for="{{ form.location.label }}" class="col-sm-3 control-label"> {{ form.location.label }}:</label>

        <div class="col-sm-9">
            {{ form.location.errors }}
            {{ form.location }}
        </div>
    </div>
</div>


<script>
    function initialize() {
        var input_location = document.getElementById('{{ form.location.auto_id }}');
        var autocomplete = new google.maps.places.Autocomplete(input_location);

        var g_autocomplete = $("body > .pac-container").filter(":visible");
        g_autocomplete.bind('DOMNodeInserted DOMNodeRemoved', function (event) {
            $(".pac-item", this).addClass("needsclick");
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

</script>

非常感谢。

Answer 1

基本上，在您的点击处理程序中，您需要执行以下操作：

1. 将最后添加的input元素与jQuery匹配。 这将返回一个jQuery对象。
2. 通过使用[0]获取基础的普通JavaScript对象。
3. 使用普通的JavaScript对象创建自动完成输入。

假设您的#empty_form看起来像这样。

<form id="empty_form">
    <input type="text"/>
</form>

然后，您可以使用以下代码段（ JSFiddle ）动态初始化自动完成输入。

$('#add_more').click(function () {
    ...

    var input = $('#form_set').children('input:last')[0];
    new google.maps.places.Autocomplete(input);
});

如果#empty_form的内容更复杂，则可能会更复杂一些，但基本过程保持不变。