jQuery模板中Autocomplete功能失效问题求助

你遇到的这个问题其实挺常见的——动态生成的DOM元素没法被提前执行的代码绑定插件。咱们来拆解下原因：你现在是先跑了初始化Autocomplete的.each()循环，再去渲染jQuery模板，但这时候模板里的.approvername文本框还没被添加到页面DOM里呢，代码根本找不到这些元素，自然绑定不上。而模板外的静态文本框因为一开始就在页面里，所以能正常工作。

下面给你几个具体的解决办法：

1. 调整代码执行顺序（最直接的修复） #

把Autocomplete的初始化代码放到模板渲染完成之后，确保DOM元素已经存在了再绑定插件：

// 第一步：先渲染模板到页面
$("#approverTemplate").tmpl(approvers).appendTo("#approverContainer");

// 第二步：再给已生成的文本框初始化Autocomplete
$('.approvername').each(function (i, el) { 
    el = $(el); 
    el.autocomplete({ 
        source: function (request, response) { 
            $.ajax({ 
                url: 'https://localhost/<myurl>' + request.term, 
                dataType: "json", 
                type: "GET", 
                contentType: "application/json; charset=utf-8", 
                success: function (data) { 
                    response($.map(data, function (value, key) { 
                        return { label: value.full_name, value: value.user_id }; 
                    })) 
                }, 
                error: function (response) { 
                    alert(response.responseText); 
                }, 
                failure: function (response) { 
                    alert(response.responseText); 
                } 
            }); 
        }, 
        focus: function (event, ui) { 
            el.val(ui.item.label); 
            return false; 
        }, 
        select: function (e, ui) { 
            el.val(ui.item.label); 
            return false; 
        }, 
        minLength: 1 
    }); 
});

2. 封装初始化逻辑（适配多次渲染场景） #

如果之后你还会多次渲染这个模板添加新的文本框，把初始化逻辑封装成函数，每次渲染完都调用一次，还能避免重复初始化已绑定的元素：

// 封装初始化函数
function initApproverAutocomplete() {
    // 只给还没绑定Autocomplete的文本框初始化
    $('.approvername').not('.ui-autocomplete-input').each(function (i, el) { 
        el = $(el); 
        el.autocomplete({ 
            // 这里复制你原来的Autocomplete配置即可
            source: function (request, response) { 
                $.ajax({ 
                    url: 'https://localhost/<myurl>' + request.term, 
                    dataType: "json", 
                    type: "GET", 
                    contentType: "application/json; charset=utf-8", 
                    success: function (data) { 
                        response($.map(data, function (value, key) { 
                            return { label: value.full_name, value: value.user_id }; 
                        })) 
                    }, 
                    error: function (response) { 
                        alert(response.responseText); 
                    }, 
                    failure: function (response) { 
                        alert(response.responseText); 
                    } 
                }); 
            }, 
            focus: function (event, ui) { 
                el.val(ui.item.label); 
                return false; 
            }, 
            select: function (e, ui) { 
                el.val(ui.item.label); 
                return false; 
            }, 
            minLength: 1 
        }); 
    });
}

// 第一次渲染模板后调用
$("#approverTemplate").tmpl(approvers).appendTo("#approverContainer");
initApproverAutocomplete();

// 之后如果再添加新的审批人模板，只需重复调用：
// $("#approverTemplate").tmpl(newApproverData).appendTo("#approverContainer");
// initApproverAutocomplete();

3. 额外检查项 #

如果调整顺序后还是不行，可以排查这几点：

• 在浏览器控制台执行$('.approvername')，看看能不能找到模板生成的文本框，确认模板是否正确渲染到了#approverContainer里
• 确保已经正确引入了jQuery UI的JS和CSS文件（Autocomplete是jQuery UI的组件，不是原生jQuery的）
• 检查AJAX请求的URL是否正确，在控制台的Network标签里看看请求有没有发送成功

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