javascript - Django-动态表单增量ID为表单集中添加的每个新输入元素

Question

我有一个表单，需要 4 个字段作为输入，如下所示:-

forms.py

AuthorFormset = modelformset_factory(
    Author,
    fields=('due_date','author' ),
    extra=5,
    widgets={'due_date': forms.DateInput(attrs={
            'class': 'form-control', 'placeholder': 'Date'}),
            'author': forms.TextInput(attrs={
            'class': 'form-control',
            'id': 'txtSearch',
            'placeholder': 'Participants'
        }),
    }

我已向字段作者添加了一个 css ID，它是一个文本输入。 对于此文本输入，我还通过 Jquery 自动完成功能进行 Ajax 调用。

view.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="col-2">
        <div class="input-group">
            {{form.author}}
        </div>
    </div>

Javascript

<script>
  $(document).ready(function(){ 
      $("#txtSearch").autocomplete({
          source: "/ajax_calls/search/",
          minLength: 2,
          open: function(){
              setTimeout(function () {
                  $('.ui-autocomplete').css('z-index', 99);
              }, 0);
          }
        });

  });

</script>

一切工作正常，只是我只能处理第一个字段的 Ajax 调用。 我想为动态表单中添加的每个新字段增加 ID。

Answer 1

您还可以使用 .each() 对 jquery 中的每个字段进行循环，而不是递增 id ，例如在具有类型属性 <input type="text" ...> 的每个输入上:

$('input[type="text"]').each(function() {
   var $input = $(this);
   $input.autocomplete({
      source: "/ajax_calls/search/",
      minLength: 2,
      open: function(){
         ...
      }
   });
});

引用文献: https://api.jquery.com/each/

编辑:jquery 选择器中缺少结束括号