javascript - 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 表单集中再添加一个表单。

但是由于在我的空表单中，我有一个使用谷歌地图自动建议的字段:

<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的内容更复杂，它可能会变得更复杂一些，但基本过程保持不变。