如何为自动补全列表项添加addEventListener，实现选中项填入输入框及相关问题排查

我来帮你搞定这个问题！核心就是要给生成的列表项加上点击事件，把选中的内容同步到输入框里。另外你提到的脚本位置问题确实很关键——把<script>标签放在</body>末尾才能确保DOM元素都加载完毕，避免出现“Cannot read property 'addEventListener' of null”这类错误，这点你已经做对啦，接下来直接适配你的代码就行。

方案一：用DOM方法创建列表项（推荐） #

这种方式更符合现代前端最佳实践，能更安全地绑定事件，还能避免字符串拼接可能带来的问题：

var search_terms = ['a', 'b', 'c'];
function autocompleteMatch(input) {
  if (input == '') {
    return [];
  }
  var reg = new RegExp(input);
  return search_terms.filter(function(term) {
    return term.match(reg);
  });
}
function showResults(val) {
  const res = document.getElementById("result");
  res.innerHTML = ''; // 清空之前的结果
  const terms = autocompleteMatch(val);
  if (terms.length === 0) return;
  
  const ul = document.createElement('ul');
  // 用let声明i避免全局变量污染
  for (let i = 0; i < terms.length; i++) {
    const li = document.createElement('li');
    li.textContent = terms[i];
    // 给每个列表项绑定点击事件
    li.addEventListener('click', function() {
      // 将选中内容填入输入框
      document.getElementById('id_post').value = this.textContent;
      // 点击后自动隐藏结果列表
      res.innerHTML = '';
    });
    ul.appendChild(li);
  }
  res.appendChild(ul);
}

方案二：用innerHTML拼接（适合快速改造） #

如果你更习惯用字符串拼接生成HTML，也可以直接给<li>添加onclick属性：

var search_terms = ['a', 'b', 'c'];
function autocompleteMatch(input) {
  if (input == '') {
    return [];
  }
  var reg = new RegExp(input);
  return search_terms.filter(function(term) {
    return term.match(reg);
  });
}
function showResults(val) {
  const res = document.getElementById("result");
  res.innerHTML = '';
  let list = '';
  const terms = autocompleteMatch(val);
  for (let i = 0; i < terms.length; i++) {
    // 拼接时绑定点击事件，调用填充函数
    list += `<li onclick="fillInput('${terms[i]}')">${terms[i]}</li>`;
  }
  res.innerHTML = `<ul>${list}</ul>`;
}

// 新增输入框填充函数
function fillInput(value) {
  document.getElementById('id_post').value = value;
  document.getElementById("result").innerHTML = '';
}

注意事项 #

你的HTML代码不需要改动，但一定要确保脚本标签放在<body>的最后，比如：

<body>
  <input type="text" class="form-control" placeholder="Explain in fewer words with the primary product key word (Eg: OneDrive sync issue, etc.)" name="post" required id="id_post" onKeyUp="showResults(this.value)">
  <span class="fas fa-asterisk" style="font-size:12px;color:red;position:absolute; right:20px;top:12px;" id="asterix"></span>
  <div id="result"></div>

  <!-- 脚本必须放在此处，确保DOM已加载 -->
  <script>
    // 上面的JavaScript代码放在这里
  </script>
</body>

这样修改后，点击自动补全列表里的项，内容就会自动填入输入框，同时列表会被清空，完美适配你的现有功能~

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