如何用JavaScript实现搜索联想结果点击填入输入框功能

你已经实现了输入文字显示联想列表的功能，要添加点击联想项填充输入框的功能，推荐用事件委托实现（这种方式比给每个项单独绑定事件更高效，毕竟每次输入都会重新渲染联想列表）。

修改后的完整代码： #

index.html（无需修改，保持原有结构即可）

<form method="get" action="">
   <input type="search" name="recherche" placeholder="code article.." id="rechercheInput" required>
   <div id="suggestions"></div>
   <button class="btn waves-effect waves-light" type="submit">Recherche
   <i class="material-icons right">search</i>
   </button>
</form> 

script.js（添加事件委托逻辑）

const articles = [
  {name:'matoss'},
  {name:'solution'},
  {name:'moloss'},
  {name:'KARKAN'}
];

const rechercheInput = document.getElementById('rechercheInput');
const suggestionsContainer = document.getElementById('suggestions');

rechercheInput.addEventListener('keyup', function(){
  const input = rechercheInput.value;
  const result = articles.filter(item => 
    item.name.toLocaleLowerCase().includes(input.toLocaleLowerCase())
  );
  let suggestion ='';

  if(input !== ''){
    result.forEach(resultItem =>
      suggestion += `<div class="suggestion">${resultItem.name}</div>`
    )
  }
  suggestionsContainer.innerHTML = suggestion;
});

// 添加点击联想项填充输入框的逻辑
suggestionsContainer.addEventListener('click', function(e) {
  // 验证点击的元素是联想项
  if (e.target.classList.contains('suggestion')) {
    // 将点击的内容填入输入框
    rechercheInput.value = e.target.textContent;
    // 可选：点击后清空联想列表，提升体验
    suggestionsContainer.innerHTML = '';
  }
});

关键修改说明： #

1. 提前获取suggestions容器的DOM节点，避免重复查询DOM
2. 给suggestions容器绑定点击事件，利用事件委托监听子元素的点击
3. 点击时判断目标元素是否为.suggestion类的项，若是则将其文本内容赋值给输入框
4. 可选：点击后清空联想列表，让界面更简洁

如果你偏好更直接的绑定方式，也可以在创建联想项时直接加onclick事件（适合简单场景），示例如下：

// 在keyup事件的forEach里修改：
result.forEach(resultItem =>
  suggestion += `<div class="suggestion" onclick="fillInput('${resultItem.name}')">${resultItem.name}</div>`
);

// 全局定义填充函数
function fillInput(text) {
  rechercheInput.value = text;
  suggestionsContainer.innerHTML = '';
}

但事件委托的方式更推荐，它不需要全局函数，且在频繁更新DOM的场景下更稳定。

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