Django-динамический идентификатор приращения формы для каждого нового элемента ввода, добавляемого в набор форм

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 для автора поля, который является вводом текста. Для этого ввода текста я также выполняю Ajax-вызов через функцию автозаполнения Jquery.

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

Вместо увеличения идентификатора вы также можете выполнить цикл для каждого поля в jquery, используя .each(), например, для каждого ввода с атрибутом типа <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