如何在内联形式中使用“django-autocomplete-light”

Posted 2023-05-07

【中文标题】如何在内联形式中使用“django-autocomplete-light”

【英文标题】：How to use "django-autocomplete-light" in inline form

【发布时间】：2018-06-13 06:29:33

【问题描述】：

我想使用带有“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>

【问题讨论】：

我真的不在乎我用什么包来解决问题。以内联形式进行有效搜索很重要。我的问题基本上是我想创建一个与药物有一对多联系的案例，而这些药物又在数千种活性成分的数据库中具有活性成分。在这里，我必须有一个舒适的搜索。非常感谢您能帮我解决这个问题。

我已经回答了这个问题的副本here。我相信这个问题与 formset.media 被包含在表单集之后而不是之前有关。我不确定这是为什么，但我注意到将它移到表单集的开始标记之前解决了我遇到的问题。

django-autocomplete-light version 3.8.1 为我工作。您可以在此处阅读发行说明：yourlabs.org/posts/…。

【参考方案1】：

经过几个小时的谷歌搜索和其他答案，对我有用的是这个。 我在 jquery.formset.js 的默认值中添加了一个名为 clone 的键，默认值为 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
    ;

然后将jquery.formset.js中addButton.click()里面的代码替换为

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

到

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

然后在formset的模板中，从这里改变了formset函数：

$('#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");
                
            );

这对我来说很好。