如何用纯JavaScript选中自动补全列表的点击项？

我来帮你搞定这个问题！你现在的核心痛点是点击列表项时只能拿到整个容器的内容，没法精准获取被点击的单个项，主要是事件绑定和目标元素的获取方式出了问题。我给你拆解下问题，再提供正确的实现方案：

原代码的问题分析 #

1. 事件监听写法错误：addEventListener的第二个参数不能是字符串"div"，这是混淆了旧的事件绑定语法；
2. 内容获取逻辑错误：你用document.getElementById('demo').innerHTML拿到的是整个容器的所有内容，不是被点击的单个项；
3. 重复绑定事件：每次AJAX请求成功后都给demo绑定点击事件，会导致多次触发（比如第二次搜索后点击会弹多次提示）。

正确实现方案：事件委托 #

处理动态生成的元素，事件委托是最高效的方式——只需要给父容器绑定一次事件，利用事件冒泡机制捕获子元素的点击，不用每次AJAX请求后都重新绑定。

修改后的完整代码如下：

// 页面加载完成后，只绑定一次事件委托
document.addEventListener('DOMContentLoaded', function() {
  const demoContainer = document.getElementById("demo");
  demoContainer.addEventListener("click", function(e) {
    // 确认点击的是我们生成的列表项
    if (e.target.tagName === 'DIV' || e.target.classList.contains('search-item')) {
      const selectedItem = e.target.textContent; // 用textContent比innerHTML更安全
      alert(selectedItem);
      
      // 可选：把选中的内容填充到搜索框
      document.getElementById("searchbox").value = selectedItem;
      // 可选：选中后隐藏下拉列表
      demoContainer.style.display = "none";
    }
  });
});

function loadDoc() {
  const searchInput = document.getElementById("searchbox");
  const string = searchInput.value;
  const demoContainer = document.getElementById("demo");

  // 优化：输入字符少于3个时，直接隐藏列表，避免无效AJAX请求
  if (string.length < 3) {
    demoContainer.style.display = "none";
    return;
  }

  const xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      demoContainer.style.display = "";
      demoContainer.innerHTML = "";
      
      const obj = JSON.parse(this.responseText);
      for (let i = 0; i < obj.length; i++) {
        // 用createElement创建元素，比字符串拼接更安全（避免XSS风险）
        const itemDiv = document.createElement('div');
        itemDiv.textContent = obj[i].id;
        // 给项加类名，方便样式控制和事件判断
        itemDiv.classList.add('search-item');
        demoContainer.appendChild(itemDiv);
      }
    }
  };
  xhttp.open("POST", "/search?string=" + string, true);
  xhttp.send();
}

关键知识点说明 #

1. 事件委托的核心：通过父容器demo捕获点击事件，用e.target获取实际被点击的子元素，这样即使后续动态生成新的列表项，也能正常触发事件；
2. 避免重复绑定：把事件监听移到AJAX回调外面，只在页面加载完成后绑定一次，防止多次触发问题；
3. 安全的元素创建：用createElement和textContent代替字符串拼接，能避免返回内容包含特殊字符时的XSS风险；
4. 用户体验优化：增加输入长度判断，减少无效请求；选中项后自动填充到搜索框并隐藏列表，符合常规搜索组件的交互逻辑。

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