Django动态formset集成jQuery UI Autocomplete无报错不生效问题求助

核心问题点 #

• jQuery id选择器缺少#前缀：你调用AutoproductComplete时传入的是纯id字符串，jQuery选择id需要前缀#，否则会把传入值当作标签名匹配，永远找不到对应输入框，自动补全自然不会生效。
• 动态新增表单时绑定的元素id错误：cloneMore函数里遍历所有输入框（包含productName和orderQuantity），最后id变量存储的是最后一个遍历到的orderQuantity输入框的id，等于给数量输入框绑了自动补全，产品名输入框反而没绑定。
• （前置检查项）缺少jQuery UI依赖：jQuery的autocomplete方法属于jQuery UI组件，需要提前引入jQuery库、jQuery UI的JS文件以及jQuery UI的CSS样式，否则方法不会生效。
• 初始表单绑定不全：当前只给索引为0的初始表单绑定了自动补全，如果formset初始渲染多个表单，剩余的初始表单不会触发自动补全。

修复代码 #

修改自动补全函数，统一补全id选择器前缀 #

function AutoproductComplete(id){
    const products = [];
    console.log("This is working")
    console.log(id)

    {% for instance in products %}
        products.push("{{instance.product_name}}")
    {% endfor %}
    // 补全#前缀，适配jQuery id选择器规则
    $(`#${id}`).autocomplete({
        classes: {"ui-autocomplete-input": "highlight"},
        source: products,
        minLength: 1,
    });
};

修改新增表单逻辑，绑定正确的产品名输入框 #

function cloneMore(selector, prefix) {
    var newElement = $(selector).clone(true);
    // 单独声明变量存储产品名输入框的id
    var targetProductId = ""
    var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
    
    newElement.find(':input:not([type=button]):not([type=submit]):not([type=reset])').each(function() {
        if ($(this).attr('name')){
            var name = $(this).attr('name').replace('-' + (total-1) + '-', '-' + total + '-');
            var id = 'id_' + name;
            $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
            // 识别到产品名输入框时，记录对应id
            if(name.endsWith('productName')){
                targetProductId = id
            }
        }
    });
    
    total++;
    $('#id_' + prefix + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
    var conditionRow = $('.form-row:not(:last)');
    conditionRow.find('.btn.add-form-row')
    .removeClass('btn-success').addClass('btn-danger')
    .removeClass('add-form-row').addClass('remove-form-row')
    .html('<span class="glyphicon glyphicon-minus" aria-hidden="true" > - </span>')
  
    AutoproductComplete(targetProductId)
    return false;
}

新增初始表单全量绑定逻辑 #

替换原来仅绑定第一个表单的代码，改为页面加载完成后绑定所有初始渲染的产品名输入框：

// 页面加载完成后自动绑定所有初始表单的自动补全
$(document).ready(function(){
    $('input[name$="productName"]').each(function(){
        AutoproductComplete($(this).attr('id'))
    })
})

$(document).on('click', '.add-form-row', function(e){
    e.preventDefault();
    cloneMore('.form-row:last', 'form');
    return false;
});

内容的提问来源于stack exchange，提问作者Andre