如何在JS脚本中正确集成自动补全？表格行场景下的实现疑问

嘿，我懂你现在卡在怎么给表格里动态生成的行加自动补全功能了！结合你给的代码片段，我来帮你把这个问题捋顺～

首先，你这里是用PHP heredoc生成JS代码，要给每个带递增ID的specificationName输入框绑定token-input自动补全对吧？核心问题是要正确把PHP的递增变量和JS选择器拼接，同时确保每个输入框都能正确初始化自动补全。

修正后的完整代码示例 #

先看服务器端生成JS的部分，我帮你修正了语法错误，并且让PHP变量正确嵌入到JS里：

// 假设$t是你循环里的递增变量，比如从1开始
$products_specification_ajax = OSCOM::link('products_specification_ajax.php');

$output = <<<EOD
<script type="text/javascript"><!--
$(document).ready(function() {
  // 给当前行的specificationName输入框绑定token-input
  $("#specificationName{$t}").tokenInput("{$products_specification_ajax}", {
    // 这里可以根据需求添加token-input的配置项，比如：
    theme: "facebook",
    placeholder: "输入规格名称搜索...",
    minChars: 2, // 输入2个字符才触发搜索
    tokenLimit: 1 // 限制只能选一个规格
    // 更多配置可以参考token-input的文档
  });
});
//--></script>
EOD;

关键注意点 #

• 唯一ID确保：因为$t是递增的，所以每个输入框的ID会是specificationName1、specificationName2...这样的唯一值，避免DOM选择器冲突
• PHP变量嵌入：在heredoc里用{$变量名}的方式可以直接解析PHP变量，不用手动拼接字符串，能有效避免引号嵌套的语法错误
• Ajax接口格式：你的products_specification_ajax.php必须返回token-input要求的JSON格式，比如：

  [{"id": "1", "name": "屏幕尺寸"}, {"id": "2", "name": "电池容量"}]
  

如果是客户端动态新增行 #

要是你还需要支持点击按钮在客户端新增行，那得在新增行的DOM操作完成后，再初始化新输入框的自动补全，比如：

// 全局变量记录当前最大行号
let specification_row = {$t}; // 从服务器端获取初始值

function addNewSpecificationRow() {
  specification_row++;
  // 这里写新增表格行的DOM代码，比如插入一个包含<input id="specificationName"+specification_row>的<tr>
  const newInput = $("#specificationName" + specification_row);
  
  // 初始化自动补全
  newInput.tokenInput("{$products_specification_ajax}", {
    theme: "facebook",
    placeholder: "输入规格名称搜索..."
  });
}

这样不管是服务器端预生成的行，还是客户端动态新增的行，都能正常用上自动补全功能啦～

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