jquery ui autocomplete 默认仅初始化页面加载时已存在的元素；动态插入的新输入框需手动重新绑定，否则无法触发自动补全，本文详解绑定方法、id 冲突规避及代码优化实践。
在动态增删表单行的场景中（如服务项录入表格），Autocomplete 常见失效的根本原因在于：jQuery UI 的 autocomplete() 方法只对初始化时已存在于 DOM 中的元素生效。当通过 .clone() 添加新行后，新生成的 <input> 元素并未被 Autocomplete 实例接管，因此无法响应输入事件。
✅ 正确做法：为每个新输入框单独初始化 Autocomplete
首先，必须修正 HTML 中的 ID 重复问题——id="tutorial_name" 在多行中会重复出现，违反 HTML 规范（ID 必须唯一）。应将其改为 class，例如 class="autocomplete-service"，并确保仅对该类输入框初始化：
<!-- 修改前（错误） --> <td><input type="text" class="scode form-control text-end" name="scode[]" id="tutorial_name" ...></td> <!-- 修改后（推荐） --> <td><input type="text" class="scode form-control text-end autocomplete-service" name="scode[]" ...></td>
接着，在 BtnAdd() 函数中，克隆后立即为新行中指定类的输入框初始化 Autocomplete：
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
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 功能。
