Apps Script Web应用+Materialize动态表格自动补全失效问题

Materialize的Autocomplete组件不会自动识别动态新增的DOM元素——页面加载时它只会初始化已存在的静态元素，动态创建的元素哪怕结构完全一致，也没触发组件的绑定逻辑，所以没法弹出下拉框。

解决方法很直接：动态元素创建完成后，手动调用Materialize的Autocomplete初始化方法，具体步骤如下：

1. 抽离初始化逻辑为复用函数 #

把初始化代码单独封装，避免重复编写：

function initAutocomplete(element, config) {
  // 避免重复初始化同一个元素
  if (!element || M.Autocomplete.getInstance(element)) return;
  M.Autocomplete.init(element, config);
}

2. 初始化静态元素（保留原有流程） #

页面加载完成时处理静态表格里的Autocomplete：

document.addEventListener('DOMContentLoaded', () => {
  // 统一的数据源，避免重复定义
  const autocompleteData = {
    "Apple": null,
    "Banana": null,
    "Cherry": null
    // 替换成你的实际数据源
  };

  // 初始化所有静态的Autocomplete元素
  document.querySelectorAll('.autocomplete').forEach(el => {
    initAutocomplete(el, { data: autocompleteData });
  });
});

3. 动态元素创建后立即初始化 #

在你用document.createElement生成表格元素并添加到DOM后，立刻调用初始化函数：

function addDynamicTableRow() {
  const tableBody = document.getElementById('your-table-body-id');
  const row = document.createElement('tr');
  const cell = document.createElement('td');
  
  // 创建带Autocomplete的输入框
  const input = document.createElement('input');
  input.className = 'autocomplete';
  input.type = 'text';

  cell.appendChild(input);
  row.appendChild(cell);
  tableBody.appendChild(row);

  // 关键步骤：初始化这个动态生成的输入框
  initAutocomplete(input, {
    data: {
      "Apple": null,
      "Banana": null,
      "Cherry": null
      // 和静态元素一致的数据源
    }
  });
}

注意事项 #

• 确保动态输入框的类名、属性和静态元素保持一致，避免样式或选择器问题
• 如果数据源是从Apps Script后端异步获取的，要等数据返回后再执行初始化
• 不要重复初始化同一个元素，上面的initAutocomplete函数里已经加了实例检查，可以避免这个问题

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