将自动完成HTML建议插入到搜索栏中

<input type="text" id="searchInput" onkeyup="showSuggestions(this.value)">
<div id="suggestionsContainer"></div>

function showSuggestions(keyword) {
  // 发送异步请求获取与关键词相关的建议列表
  // 这里可以使用AJAX或其他方式发送请求到后端API获取建议列表数据

  // 假设返回的建议列表数据为suggestions，是一个包含建议词的数组
  var suggestions = ["apple", "banana", "orange", "pineapple"];

  var suggestionsContainer = document.getElementById("suggestionsContainer");
  suggestionsContainer.innerHTML = ""; // 清空之前的建议内容

  // 遍历建议列表，创建并添加建议项到建议容器中
  for (var i = 0; i < suggestions.length; i++) {
    var suggestion = suggestions[i];
    var suggestionItem = document.createElement("div");
    suggestionItem.innerHTML = suggestion;
    suggestionItem.onclick = function() {
      // 当用户点击建议项时，将建议内容填充到搜索栏中
      document.getElementById("searchInput").value = this.innerHTML;
      suggestionsContainer.innerHTML = ""; // 清空建议容器
    };
    suggestionsContainer.appendChild(suggestionItem);
  }
}