如何在Django内联表单中使用django-autocomplete-light组件

我碰到过一模一样的问题！根源在于**django-autocomplete-light(DAL)**的JavaScript只会在页面首次加载完成后初始化已存在的 autocomplete 字段，但当formset动态添加新行时，新生成的字段并没有被DAL的JS初始化，所以就会出现报错或无法使用的情况。

下面是针对你的模板的修复方案，直接替换原有的脚本部分即可：

<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">
      // 定义可复用的DAL字段初始化函数
      function initAutocompleteFields() {
        // 遍历所有带有DAL标记的字段，确保只初始化一次
        $('[data-autocomplete-light-url]').each(function() {
          if (!$(this).data('autocompleteLightInitialized')) {
            $(this).yourlabsAutocomplete();
            $(this).data('autocompleteLightInitialized', true);
          }
        });
      }

      // 页面加载完成后先初始化一次现有字段
      $(document).ready(function() {
        initAutocompleteFields();
      });

      // 初始化formset，新增行时触发DAL初始化
      $('.formset_row').formset({
        addText: 'add medication',
        deleteText: 'remove',
        prefix: 'medication_set',
        added: function(row) {
          // 新增行后，立即初始化该行内的autocomplete字段
          initAutocompleteFields();
        }
      });
    </script> 
</div>

关键修复点说明： #

• 抽离初始化函数：把DAL的字段初始化逻辑做成可复用的initAutocompleteFields函数，避免重复代码。
• 标记已初始化字段：用data-autocompleteLightInitialized标记已经处理过的字段，防止重复初始化导致的冲突。
• formset的added回调：利用jquery.formset提供的added钩子，在每次新增一行后，自动调用初始化函数处理新行里的DAL字段。

这样修改后，不管是首次加载的字段，还是后续新增的字段，都能正常触发DAL的 autocomplete 功能了。

内容的提问来源于stack exchange，提问作者Gurkenkönig