Как использовать django-autocomplete-light во встроенной форме

Я хотел бы использовать встроенную форму модели с полем django-autocomplete-light. Я тоже немного в отчаянии, потому что плохо знаю javascript. Это изображение моей формы. На первый взгляд все работает как надо:

введите здесь описание изображения

К сожалению, правильно загружается только первое поле. Если я добавлю больше полей, появятся ошибки (см. Рисунки).

введите здесь описание изображения

Это мой шаблон формы, в котором я подозреваю ошибку, потому что первое поле работает должным образом.

<div class="container">
<form method="post" action="">
  {% csrf_token %}
  {{ form.as_p }}

  <!-- Medication Table -->
  <table class="table">
      {{ medication.management_form }}

      {% for form in medication.forms %}
          {% if forloop.first %}
              <thead>
              <tr>
                  {% for field in form.visible_fields %}
                      <th>{{ field.label|capfirst }}</th>
                  {% endfor %}
              </tr>
              </thead>
          {% endif %}
          <tr class="{% cycle "row1" "row2" %} 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 %}
  </table>



  <input type="submit" value="Submit Form"/>


  <script type="text/javascript" src="{% static '/js/core/jquery.3.2.1.min.js' %}"></script>
  {{ form.media }}

    <!-- script for add, delete, update -->

    <script src="{% static 'formset/jquery.formset.js' %}"></script>
    <script type="text/javascript">
        $('.formset_row').formset({
            addText: 'add medication',
            deleteText: 'remove',
            prefix: 'medication_set'
        });
    </script>


</div>

django javascript django-forms jquery-select2 django-autocomplete-light
person Gurkenkönig    schedule 03.01.2018    source источник
comment
Мне все равно, какие пакеты я использую для решения. Важно только иметь рабочий поиск во встроенной форме. Моя проблема в основном заключается в том, что я хочу создать случай, который связан с лекарствами от одного до многих, и эти лекарства, в свою очередь, имеют активный ингредиент в базе данных из тысяч активных ингредиентов. Здесь мне нужен удобный поиск. Буду очень признателен за помощь в решении этой проблемы.   -  person Gurkenkönig    schedule 04.01.2018
comment
Я ответил на дубликат этого вопроса здесь. Я считаю, что проблема связана с включением {{formset.media}} после набора форм, а не до него. Я не уверен, почему это так, но я заметил, что перемещение его до открывающего тега набора форм решило проблему, когда это случилось со мной.   -  person Mihai Chelaru    schedule 18.02.2019
comment
django-autocomplete-light version 3.8.1 у меня работает. Примечания к выпуску можно прочитать здесь: yourlabs.org / posts /.   -  person Si Thu    schedule 26.04.2021

Ответы (1)


arrow_upward
2
arrow_downward

После нескольких часов поиска в Google и поиска других ответов у меня сработало следующее. Я добавил ключ с именем clone в значения по умолчанию jquery.formset.js со значением по умолчанию как true.

    /* Setup plugin defaults */
    $.fn.formset.defaults = {
        prefix: 'form',                  // The form prefix for your django formset
        formTemplate: null,              // The jQuery selection cloned to generate new form instances
        clone: true,                     // Set this value to false when using autocomplete in formset
        addText: 'add another',          // Text for the add link
        deleteText: 'remove',            // Text for the delete link
        addCssClass: 'add-row',          // CSS class applied to the add link
        deleteCssClass: 'delete-row',    // CSS class applied to the delete link
        formCssClass: 'dynamic-form',    // CSS class applied to each form in a formset
        extraClasses: [],                // Additional CSS classes, which will be applied to each form in turn
        keepFieldValues: '',             // jQuery selector for fields whose values should be kept when the form is cloned
        added: null,                     // Function called each time a new form is added
        removed: null                    // Function called each time a form is deleted
    };

Затем заменил код внутри addButton.click() в jquery.formset.js из

row = options.formTemplate.clone(true).removeClass('formset-custom-template')

to 

row = options.formTemplate.clone(options.clone).removeClass('formset-custom-template')

Затем в шаблоне набора форм измените функцию набора форм с этого:

$('#brand_formset_div .parentdiv .form-group').formset({
                prefix: '{{ brand_formset.prefix }}',
                deleteText: 'Clear',
                deleteCssClass: 'shop-now-delete',
                addText: 'Add new Brand',
                addCssClass: 'btn btn-success ',
            });

к этому (ключ клонирования как false вставляется вместе с функцией added, которая запускается при вставке новой строки. функция скрывает дополнительное поле автозаполнения.)

$('#brand_formset_div .parentdiv .form-group').formset({
                prefix: '{{ brand_formset.prefix }}',
                clone: false,
                deleteText: 'Clear',
                deleteCssClass: 'shop-now-delete',
                addText: 'Add new Brand',
                addCssClass: 'btn btn-success ',
                added: function(row) {
                    $('span .select2-selection--single:odd', row || null).css("display", "none");
                }
            });

У меня это сработало.

person Sanjay Krishnan    schedule 27.05.2019