javascript - Django-autocomplete-light==3.8.2 & Dajngo formset 渲染问题

Question

我正在开发一个 Django 项目，我需要在选择输入时自动完成。我已将 django-autocomplete-light==3.8.2 与 Django formset_factory 一起用于动态表单。所以这些功能对我来说很好考虑，但我面临一个特殊问题，当我添加新表单时，django-auto-complete 字段会变得混乱（见图）。

我认为这个问题是由于我的 jquery 代码处理动态表单创建而发生的。我不是 jquery 或 javascript 方面的专家。这是我的forms.py

from dal import autocomplete
from django import forms
from django.forms import inlineformset_factory, formset_factory
from .models import Country, Customer


class TForm(forms.ModelForm):
    country = forms.ModelChoiceField(
        queryset=Country.objects.all(),
        widget=autocomplete.ModelSelect2(url='country-autocomplete')
    )
    
    class Meta:
        model = Customer
        fields = ('__all__')

# formset used to render multiple 'TForm'
TFormFormset = formset_factory(TForm, extra=1)

class PersonForm(forms.ModelForm):
    country = forms.ModelChoiceField(
        queryset=Country.objects.all(),
        widget=autocomplete.ModelSelect2(url='country-autocomplete')
    )

    class Meta:
        model = Customer
        fields = ('__all__')

这是我的模板代码

{% extends 'home.html' %}
{% load static %}

{% block content %}
<br><br>
<div>
    {{formset.media}}
    <form action="" method="post">
        {% csrf_token %}
        {{ formset.management_form }}
        {% for form in formset %}
            <div class="row form-row">
                <div class="form-group col-md-3">
                    {{ form.name.errors }}
                    <label class="panel-body-text">Name:</label>
                    {{ form.name }}
                </div>
                <div class="form-group col-md-4">
                    {{ form.country.errors }}
                    <label class="panel-body-text">Country:</label>
                    {{ form.country }}
                </div>
                <div class="form-group col-md-2">
                    <label class="panel-body-text" style="color: #fff">.</label>
                    <button class="form-control btn ghost-red icon-buttons remove-form-row">Remove</button>
                </div>
            </div>
        {% endfor %}
        <div style="text-align: right;">                    
            <a href="#" class="add-form-row customer">+ Add More</a>
        </div>
        <input type="submit" />
    </form>
</div>
{% endblock %}

{% block footer %}


    <script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
        
        <script>
    
            function updateElementIndex(el, prefix, ndx) {
                var id_regex = new RegExp('(' + prefix + '-\\d+)');
                var replacement = prefix + '-' + ndx;
                if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
                if (el.id) el.id = el.id.replace(id_regex, replacement);
                if (el.name) el.name = el.name.replace(id_regex, replacement);
            }
    
            //stores the total no of item forms
            var total = 1;
    
            function cloneMore(selector, prefix) {
                var newElement = $(selector).clone(true);
newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
                    var name = $(this).attr('name')
                    if(name) {
                        name = name.replace('-' + (total-1) + '-', '-' + total + '-');
                        var id = 'id_' + name;
                        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
                    }
                });
                newElement.find('label').each(function() {
                    var forValue = $(this).attr('for');
                    if (forValue) {
                        forValue = forValue.replace('-' + (total-1) + '-', '-' + total + '-');
                        $(this).attr({'for': forValue});
                    }
                });
                total++;
                $('#id_' + prefix + '-TOTAL_FORMS').val(total);
                $(selector).after(newElement);
                return false;
            }
            
            function deleteForm(prefix, btn) {
                if (total > 1){
                    btn.closest('.form-row').remove();
                    var forms = $('.form-row');
                    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
                    for (var i=0, formCount=forms.length; i<formCount; i++) {
                        $(forms.get(i)).find(':input').each(function() {
                            updateElementIndex(this, prefix, i);
                        });
                    }
                    total--;
                } else {
                    alert("Field cannot be deleted");
                }
                return false;
            }
            
            $(document).on('click', '.add-form-row', function(e){
                e.preventDefault();
                cloneMore('.form-row:last', 'form');
                return false;
            });
            
            $(document).on('click', '.remove-form-row', function(e){
                e.preventDefault();
                deleteForm('form', $(this));
                return false;
            });
        </script>
        {% endblock %}

我已经检查了之前回答的关于我的问题的所有问题，但没有任何帮助。我已经检查了所有论坛和群组的解决方案。我知道这个问题可能是一个微不足道的问题，但我无法找到它。问题可能是由于javascript，但我无法自己解决。除了 formset 表单外，该库还适用于简单表单。

标签： javascriptjquerydjangodjango-formsdjango-autocomplete-light