动态添加表单行后启用jQueryUIAutocomplete

哈喽！今天心血来潮给大家带来了《动态表单行添加后如何启用 jQuery UI Autocomplete》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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>&lt;input type=&quot;text&quot; class=&quot;scode form-control text-end&quot; name=&quot;scode[]&quot; id=&quot;tutorial_name&quot; ...&gt;</td>

<!-- 修改后（推荐） -->
<td>&lt;input type=&quot;text&quot; class=&quot;scode form-control text-end autocomplete-service&quot; name=&quot;scode[]&quot; ...&gt;</td>

接着，在 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 功能。

终于介绍完啦！小伙伴们，这篇关于《动态添加表单行后启用jQueryUIAutocomplete》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！