Jquery django Autocomplete light表单集中未呈现自动完成字段

我正在尝试自动完成外键字段，但我按照文档中的步骤操作，无法使其正常工作

视图：

class ProductoAutocomplete(autocomplete.Select2QuerySetView):
 def get_queryset(self):
    qs = Producto.objects.all()
    if self.q:
        qs = qs.filter(nombre__icontains=self.q)
    return qs

 url(r'^producto-autocomplete/$',ProductoAutocomplete.as_view(),name='producto-autocomplete',),

class DetalleForm(forms.ModelForm):
 class Meta:
    model = DetalleVenta
    fields = [
        'producto',
        'cantidad',
        'preciounit',
        'subtotal',
    ]
    labels = {
        'producto':'Producto',
        'cantidad':'Cantidad',
        'preciounit':'Prec.Unit.',
        'subtotal':'Subtotal',
    }
    widgets = {
        'producto':forms.Select(attrs={'class':'form-control', 'autofocus':True}),
        'producto': autocomplete.ModelSelect2(url='producto-autocomplete', attrs={'data-placeholder': 'Royal ...', 'data-minimum-input-length': 2}),
        'cantidad':forms.NumberInput(attrs={'class':'form-control cantidad'}),
        'preciounit':forms.NumberInput(attrs={'class':'form-control'}),
        'subtotal':forms.NumberInput(attrs={'class':'form-control subtotal', 'readonly':True}),
    }
DetalleFormSet = inlineformset_factory(Venta, DetalleVenta,
                                   form=DetalleForm, extra=1)

 {% extends 'base/base.html' %}
 {% load static %}
 {% block titulo%} Registrar venta {%endblock%}
 {% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
  {% endblock %}
  {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
  </script>   
  {% endblock %}

URL:

class ProductoAutocomplete(autocomplete.Select2QuerySetView):
 def get_queryset(self):
    qs = Producto.objects.all()
    if self.q:
        qs = qs.filter(nombre__icontains=self.q)
    return qs

 url(r'^producto-autocomplete/$',ProductoAutocomplete.as_view(),name='producto-autocomplete',),

class DetalleForm(forms.ModelForm):
 class Meta:
    model = DetalleVenta
    fields = [
        'producto',
        'cantidad',
        'preciounit',
        'subtotal',
    ]
    labels = {
        'producto':'Producto',
        'cantidad':'Cantidad',
        'preciounit':'Prec.Unit.',
        'subtotal':'Subtotal',
    }
    widgets = {
        'producto':forms.Select(attrs={'class':'form-control', 'autofocus':True}),
        'producto': autocomplete.ModelSelect2(url='producto-autocomplete', attrs={'data-placeholder': 'Royal ...', 'data-minimum-input-length': 2}),
        'cantidad':forms.NumberInput(attrs={'class':'form-control cantidad'}),
        'preciounit':forms.NumberInput(attrs={'class':'form-control'}),
        'subtotal':forms.NumberInput(attrs={'class':'form-control subtotal', 'readonly':True}),
    }
DetalleFormSet = inlineformset_factory(Venta, DetalleVenta,
                                   form=DetalleForm, extra=1)

 {% extends 'base/base.html' %}
 {% load static %}
 {% block titulo%} Registrar venta {%endblock%}
 {% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
  {% endblock %}
  {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
  </script>   
  {% endblock %}

结果是正确的：

表格：

class ProductoAutocomplete(autocomplete.Select2QuerySetView):
 def get_queryset(self):
    qs = Producto.objects.all()
    if self.q:
        qs = qs.filter(nombre__icontains=self.q)
    return qs

 url(r'^producto-autocomplete/$',ProductoAutocomplete.as_view(),name='producto-autocomplete',),

class DetalleForm(forms.ModelForm):
 class Meta:
    model = DetalleVenta
    fields = [
        'producto',
        'cantidad',
        'preciounit',
        'subtotal',
    ]
    labels = {
        'producto':'Producto',
        'cantidad':'Cantidad',
        'preciounit':'Prec.Unit.',
        'subtotal':'Subtotal',
    }
    widgets = {
        'producto':forms.Select(attrs={'class':'form-control', 'autofocus':True}),
        'producto': autocomplete.ModelSelect2(url='producto-autocomplete', attrs={'data-placeholder': 'Royal ...', 'data-minimum-input-length': 2}),
        'cantidad':forms.NumberInput(attrs={'class':'form-control cantidad'}),
        'preciounit':forms.NumberInput(attrs={'class':'form-control'}),
        'subtotal':forms.NumberInput(attrs={'class':'form-control subtotal', 'readonly':True}),
    }
DetalleFormSet = inlineformset_factory(Venta, DetalleVenta,
                                   form=DetalleForm, extra=1)

 {% extends 'base/base.html' %}
 {% load static %}
 {% block titulo%} Registrar venta {%endblock%}
 {% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
  {% endblock %}
  {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
  </script>   
  {% endblock %}

模板：

class ProductoAutocomplete(autocomplete.Select2QuerySetView):
 def get_queryset(self):
    qs = Producto.objects.all()
    if self.q:
        qs = qs.filter(nombre__icontains=self.q)
    return qs

 url(r'^producto-autocomplete/$',ProductoAutocomplete.as_view(),name='producto-autocomplete',),

class DetalleForm(forms.ModelForm):
 class Meta:
    model = DetalleVenta
    fields = [
        'producto',
        'cantidad',
        'preciounit',
        'subtotal',
    ]
    labels = {
        'producto':'Producto',
        'cantidad':'Cantidad',
        'preciounit':'Prec.Unit.',
        'subtotal':'Subtotal',
    }
    widgets = {
        'producto':forms.Select(attrs={'class':'form-control', 'autofocus':True}),
        'producto': autocomplete.ModelSelect2(url='producto-autocomplete', attrs={'data-placeholder': 'Royal ...', 'data-minimum-input-length': 2}),
        'cantidad':forms.NumberInput(attrs={'class':'form-control cantidad'}),
        'preciounit':forms.NumberInput(attrs={'class':'form-control'}),
        'subtotal':forms.NumberInput(attrs={'class':'form-control subtotal', 'readonly':True}),
    }
DetalleFormSet = inlineformset_factory(Venta, DetalleVenta,
                                   form=DetalleForm, extra=1)

 {% extends 'base/base.html' %}
 {% load static %}
 {% block titulo%} Registrar venta {%endblock%}
 {% block contenido %}
<div class="col-md-12">
<form method="post">{% csrf_token %}
    <div class="col-md-4 form-group">
    <label class="font-weight-bold" for="{{form.cliente.name}}">{{form.cliente.label}}</label>
    {{form.cliente}}
    </div>
    <h4 class="text-left">Detalle de venta: </h4>
    <div class="table-responsive-sm">
        <table class="table" id="tablaDetalle">
            {{ detalleformset.management_form }}
            <thead class="thead-dark">
                <th>Producto</th>
                <th width="100px">Cantidad</th>
                <th width="115px">Prec.Unit.</th>
                <th width="115px">Subtotal</th>
                <th>Acción</th>
            </thead>
            <tbody>
            {% for form in detalleformset.forms %}
                <tr class="formset_row">
                    {% for field in form.visible_fields %}
                        <td>
                            {# Include the hidden fields in the form #}
                            {% if forloop.first %}
                                {% for hidden in form.hidden_fields %}
                                    {{ hidden }}
                                {% endfor %}
                            {% endif %}
                            {{ field.errors.as_ul }}
                            {{ field }}
                        </td>
                    {% endfor %}
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>
        <div class="row justify-content-md-end">
        <div class="col-md-2">
        <label class="font-weight-bold" for="{{form.total.name}}">{{form.total.label}}</label>
        {{form.total}}
        </div>
        </div>
        <div class="form-group">
        <label class="font-weight-bold" for="{{form.descripcion.name}}">{{form.descripcion.label}}</label>
        {{form.descripcion}}
        </div>
        <div class="col-md-4 offset-md-4">
          <button class="btn btn-block btn-lg btn-primary" type="submit"><span><i class="fa fa-shopping-cart"></i>
          </span>Registrar venta</button>
        </div>
    </form>
    </div>
  {% endblock %}
  {% block javascript %}
<script type="text/javascript" src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
{{ form.media }}
<script src="{% static 'js/jquery.formset.js' %}"></script>
<script type="text/javascript">
  $('.formset_row').formset({
        addText: 'Agregar Producto',
        deleteText: 'remover',
        prefix: 'detalleventa'
    });
        $("#tablaDetalle").on("focus keyup", "tr", function(){
          var total = 0;

          var row = $(this).closest("tr");
          var cantidad = parseInt(row.find("input:eq(2)").val());
          var precio = parseFloat(row.find("input:eq(3)").val());
          var subtotal = cantidad * precio;
          row.find("input:eq(4)").val(isNaN(subtotal) ? "" : subtotal.toFixed(2));

            $(".subtotal").each(function () {
                var stval = parseFloat($(this).val());
                total += isNaN(stval) ? 0 : stval;
            });

            $('.delete-row').click(function(){
                var $fila = $(this).parents('tr');
                var valsub = parseFloat($fila.find('input:eq(4)').val());
                new Promise(function(done){
                    total -= isNaN(valsub) ? 0 : valsub;
                    $('.total').val(total.toFixed(2));
                    done();
                })
                .then(function(){
                   $fila.find('input:eq(4)').val(0);
                })
            });

            $('.total').val(total.toFixed(2));
        });
  </script>   
  {% endblock %}

{%extends'base/base.html%}
{%load static%}
{%block titulo%}注册商文塔{%endblock%}
{%block contenido%}
{%csrf_令牌%}
{{form.cliente.label}
{{form.cliente}}
德塔勒·德文塔：
{{detalleformset.management_form}}
产品
康蒂达
预处理单元。
小计
阿克松
{detalleformset.forms%中表单的%s}
{%form.visible_fields%}
{#在#表单中包含隐藏字段}
{%if-forloop.first%}
{%用于隐藏在表单中。隐藏的_字段%}
{{隐藏}}
{%endfor%}
{%endif%}
{{field.errors.as_ul}}
{{field}}
{%endfor%}
{%endfor%}
{{form.total.label}
{{form.total}
{{form.description.label}
{{form.descripion}}
文塔登记处
{%endblock%}
{%block javascript%}
{{form.media}
$（'.formset_行'）.formset({
addText:“Agregar Producto”，
deleteText:“删除程序”，
前缀：“detalleventa”
});
$（“#tablaDetalle”）。关于（“聚焦键控”、“tr”，函数（）{
var合计=0；
var行=$（此）.tr；
var cantidad=parseInt（row.find（“输入：eq（2）”）.val（））；
var precio=parseFloat（row.find（“输入：eq（3）”）.val（））；
var小计=cantidad*precio；
行.find（“输入：等式（4）”）.val（isNaN（小计）？“”：小计.toFixed（2））；
$（“.subtotal”）。每个（函数（）{
var stval=parseFloat（$（this.val（））；
总计+=伊斯南（标准值）？0:标准值；
});
$（'.delete row'）。单击（函数（）{
var$fila=$（this.parents（'tr'）；
var valsub=parseFloat（$fila.find（'input:eq（4）'）.val（））；
新承诺（功能（完成）{
总计-=isNaN（VALUB）？0:VALUB；
$（'.total'）.val（total.toFixed（2））；
完成（）；
})
.然后（函数（）{
$fila.find（'input:eq（4）'）.val（0）；
})
});
$（'.total'）.val（total.toFixed（2））；
});
{%endblock%}

这不会呈现“自动完成”字段，只会显示一个空的选择字段

这是我目前的问题，我遵循了中的步骤

---

这是我第一次在Django这样做，我找不到错误。可能缺少某些内容。

解决了我应该以这种方式传递表单的名称：

 {{ detalleformset.media }}