带有 Jquery Ui 自动完成功能的 Django 动态表单集

Question

嗨，我对 django 相当陌生，需要为每个 from 添加具有自动完成功能的动态表单集。我不完全确定我做错了什么我尝试了一些方法，这是我最近的！ 我有一个名为 AutoproductComplete 的函数，它接收我想要添加自动完成的当前表单集表单输入的 id。它不起作用，没有错误，不知道为什么。我也是在 after 方法之后做的，所以假设表单已添加到 DOM 中？

'html'

 <form class="form-horizontal" method="POST" action="">
                            {% csrf_token %}
                            {{ formset.management_form }}
                            {% for form in formset %}
                            <div class="row form-row spacer">
                               
                                <div class="input-group" style="padding:5px;">
                                    {{form.productName}}
                                    {{form.orderQuantity}}
                                    <div class="input-group-append">
                                        <button class="btn btn-success add-form-row" 
                                         style="margin:5px;">+</button>
                                    </div>
                                </div>
                            </div>
                         
                            {% endfor %}
                            <br>
                            
                            <div class="row spacer">
                                <div class="col-12 offset-9">
                                    <button type="submit" class="btn btn-block btn- 
                                     dark">Create Order</button>
                                </div>
                            </div>
                     </form>

JavaScript '''

            function AutoproductComplete(id){
            const products = [];
            console.log("This is working")
            console.log(id)

            {% for instance in products %}
                products.push("{{instance.product_name}}")
            {% endfor %}
        

            $(id).autocomplete({
                classes: {"ui-autocomplete-input": "highlight"},
                source: products,
                minLength: 1,
            });
        };
        
        AutoproductComplete("id_form-0-productName" )

        function cloneMore(selector, prefix) {
        var newElement = $(selector).clone(true);

        var id = ""
        var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
      
           
             `enter code here`newElement.find(
            ':input:not([type=button]):not([type=submit]):not([type=reset])')
           .each(function() {
           if ($(this).attr('name')){
                    var name = $(this).attr('name').replace('-' + (total-1) + '-', '- 
                    ' + total + '-');
                    id = 'id_' + name;
                 
                    $(this).attr({'name': name, 'id': 
                     id}).val('').removeAttr('checked');
                   
            }
            });
            
            total++;
            
            $('#id_' + prefix + '-TOTAL_FORMS').val(total);
            $(selector).after(newElement);
            var conditionRow = $('.form-row:not(:last)');
            conditionRow.find('.btn.add-form-row')
            .removeClass('btn-success').addClass('btn-danger')
            .removeClass('add-form-row').addClass('remove-form-row')
            .html('<span class="glyphicon glyphicon-minus" aria-hidden="true" > - 
             </span>')
          
            AutoproductComplete(id)
            return false;
        }

        $(document).on('click', '.add-form-row', function(e){
            e.preventDefault();
            cloneMore('.form-row:last', 'form');
            return false;
        });

'''

Answer 1

你可以使用 DAL

django-autocomplete-light

正如它所说，它非常轻巧，恕我直言，易于配置且高度可配置。

您可以在此处找到文档：

https://django-autocomplete-light.readthedocs.io/en/master/