如何为动态添加的表单行启用 jQuery UI Autocomplete 功能

jquery ui autocomplete 默认仅初始化页面加载时已存在的元素；动态插入的新输入框需手动重新绑定，否则无法触发自动补全，本文详解绑定方法、id 冲突规避及代码优化实践。

在动态增删表单行的场景中（如服务项录入表格），Autocomplete 常见失效的根本原因在于：jquery UI 的 autocomplete() 方法只对初始化时已存在于 dom 中的元素生效。当通过 .clone() 添加新行后，新生成的 元素并未被 Autocomplete 实例接管，因此无法响应输入事件。

✅ 正确做法：为每个新输入框单独初始化 Autocomplete

首先，必须修正 html 中的 ID 重复问题——id=”tutorial_name” 在多行中会重复出现，违反 HTML 规范（ID 必须唯一）。应将其改为 class，例如 class=”autocomplete-service”，并确保仅对该类输入框初始化：

接着，在 BtnAdd() 函数中，克隆后立即为新行中指定类的输入框初始化 Autocomplete：

function BtnAdd() {     var $newRow = $("#TRow").clone().appendTo("#TBody");     $newRow.find("input").val(""); // 清空所有输入值     $newRow.removeClass("d-none");      // ✅ 关键：仅对新行中的 .autocomplete-service 输入框初始化     $newRow.find(".autocomplete-service").autocomplete({         source: "backend-script.php",         minLength: 2, // 可选：至少输入 2 字符才触发请求         select: function(event, ui) {             // 可选：选中后自动填充关联字段（如 consultant、mach no）             var $row = $(this).closest("tr");             $row.find(".consultant").val(ui.item.consultant || "");             $row.find(".mach-no").val(ui.item.mach_no || "");         }     });      // 更新序号（注意：th 应为 td，且建议用 td 替代 th 于 tbody 内）     $newRow.find("td:first").text($("#TBody tr").length - 1); }

⚠️ 注意事项：禁止克隆含 id 的元素：id 是全局唯一标识，克隆会导致多个同名 ID，破坏 JS 选择器可靠性及可访问性。避免全局初始化覆盖：删除原 $(function(){…}) 中对 #tutorial_name 的初始化，因其仅执行一次且目标已不存在。后端需适配返回字段：当前 PHP 脚本只返回 id 和 value，若需填充其他列（如 consultant），请扩展查询并返回对应字段：// backend-script.php 改进示例 $sql = “SELECT id, user_id AS value, consultant, mach_no FROM machine1 WHERE user_id LIKE ?”; $stmt = $conn->prepare($sql); $stmt->bind_param(“s”, $searchTerm); $stmt->execute(); $result = $stmt->get_result(); $data = []; while ($row = $result->fetch_assoc()) { $data[] = $row; // 直接返回含 consultant/mach_no 的完整对象 } echo json_encode($data);

? 补充：支持删除后重置（可选增强）

若用户删除某行后希望释放其 Autocomplete 实例（防止内存泄漏），可在 BtnDel() 中解绑：

function BtnDel(v) {     var $row = $(v).closest("tr");     $row.find(".autocomplete-service").autocomplete("destroy"); // 清理实例     $row.remove();     GetTotal();      // 重编号剩余行     $("#TBody tr").each(function(index) {         $(this).find("td:first").text(index + 1);     }); }

✅ 总结

• Autocomplete 不是“监听未来元素”的事件委托机制，而是显式绑定到具体 DOM 节点；
• 动态创建 → 必须手动初始化 → 推荐使用语义化 class（如 .autocomplete-service）精准定位；
• 永远避免重复 id，改用 class + data-* 属性传递上下文；
• 后端返回结构应与前端 select 回调逻辑对齐，提升用户体验连贯性。

遵循以上方案，即可稳定支撑任意数量的动态表单行 Autocomplete 功能。