JavaScript/HTML自动补全：获取点击选项的数组索引

架构老林

2026-6-27

解决W3Schools自动补全点击时获取数组索引的问题

核心思路

不要用全局隐藏字段存储索引，而是给每个自动补全列表项绑定对应数组索引的自定义属性，点击时直接读取该属性即可。

具体修改步骤

假设你用的是W3Schools标准的autocomplete代码，按以下两处修改：

生成列表项时绑定索引
找到循环数组创建补全项的代码块，给每个创建的元素添加data-index属性，值为当前数组的索引：

function autocomplete(inp, arr) {
  // ... 原代码其他部分 ...
  for (i = 0; i < arr.length; i++) {
    // 创建列表项元素（原代码可能是div/li，根据实际结构调整）
    var item = document.createElement("DIV");
    // 给元素添加索引属性
    item.setAttribute('data-index', i);
    // 原代码的文本高亮等逻辑保留
    item.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
    item.innerHTML += arr[i].substr(val.length);
    // ... 原代码其他部分 ...
  }
  // ... 原代码其他部分 ...
}

点击事件中读取索引
在列表项的点击事件处理函数里，通过this获取点击的元素，读取data-index属性：

item.addEventListener("click", function(e) {
  // 获取当前项对应的数组索引
  const selectedIndex = parseInt(this.getAttribute('data-index'));
  // 获取对应数组元素
  const selectedValue = arr[selectedIndex];
  // 填充输入框（原代码逻辑保留）
  inp.value = selectedValue;
  // 这里就可以用selectedIndex做你需要的操作了
  console.log("选中项的数组索引：", selectedIndex);
  // 关闭补全列表（原代码逻辑保留）
  closeAllLists();
});