Django динамический набор форм с автозаполнением Jquery Ui

Hi there I am fairly new to django and need to add dynamic formsets with autocomplete functions for every from. I am not entirely sure what I am doing wrong i have tried a few approaches and this is my most recent!

I have function called AutoproductComplete which receives the id of the current formset form input that i want to add the auto complete to. It doesnt work, no errors, not sure why. I also did it after the after method so assume the form has been added to the 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;
        });

'''

Вернуться на верх