「高级前端开发工程师教你如何用JavaScript打造自动补全搜索工具」

好的，这里是一个简单的实现示例：

HTML：

<!-- 输入框 -->
<input type="text" id="searchInput" onkeyup="showSuggestions()" placeholder="Type to search...">

<!-- 自动补全列表 -->
<div id="suggestions"></div>

JavaScript：

const suggestions = ["apple", "banana", "orange", "pear", "pineapple"]; // 建议列表

function showSuggestions() {
  let searchText = document.getElementById("searchInput").value; // 获取输入框的值
  let matches = []; // 匹配的建议

  // 遍历建议列表，如果建议中包含搜索文本，则将其添加到匹配列表中
  for (let i = 0; i < suggestions.length; i++) {
    if (suggestions[i].toLowerCase().includes(searchText.toLowerCase())) {
      matches.push(suggestions[i]);
    }
  }

  let suggestionsDiv = document.getElementById("suggestions"); // 获取建议列表的视图
  suggestionsDiv.innerHTML = ""; // 清空以前的建议

  // 遍历匹配的建议，将它们添加到建议列表中
  for (let i = 0; i < matches.length; i++) {
    let suggestion = document.createElement("div"); // 创建新的建议元素
    suggestion.innerHTML = matches[i]; // 设置建议元素的文本
    suggestion.setAttribute("onclick", `setSuggestion('${matches[i]}')`); // 设置点击事件，当用户点击一个建议时，它将被设置为输入框的值
    suggestionsDiv.appendChild(suggestion); // 添加建议元素到建议列表中
  }
}

function setSuggestion(suggestion) {
  document.getElementById("searchInput").value = suggestion; // 将建议设置为输入框的值
  document.getElementById("suggestions").innerHTML = ""; // 清空建议列表
}

此示例中，我们通过监听输入框上的onkeyup事件来触发showSuggestions()方法。该方法将获取输入框中的值，并与建议列表中的每个项进行比较，然后将匹配的项添加到匹配数组中。接下来，它将为每个匹配项创建一个新的DIV元素并将其添加到建议列表DIV中。当用户单击建议时，它将调用setSuggestion()方法，该方法将取决于此建议并将其设置为输入框的值。