let data = []; // 搜索的数据 const searchInput = document.getElementById("search"); const searchResult = document.getElementById("search-result"); // 从数据文本中解析出搜索数据 fetch("data.txt") .then((response) => response.text()) .then((text) => { data = text.split("\n").filter((item) => item.trim() !== ""); }) .catch((error) => console.error(error)); searchInput.addEventListener("input", (event) => { const keyword = event.target.value.trim(); // 获取输入框中的值并去除首尾空格 if (!keyword) { searchResult.innerHTML = ""; // 关键词为空，清空下拉列表 return; } const matchedData = data.filter((item) => item.includes(keyword) ); // 过滤出匹配的数据 if (matchedData.length === 0) { searchResult.innerHTML = "<li>无匹配结果</li>"; // 没有匹配的数据 } else { searchResult.innerHTML = matchedData .map((item) => `<li>${item}</li>`) .join(""); // 根据匹配的数据渲染下拉列表 } }); searchResult.addEventListener("click", (event) => { if (event.target.tagName === "LI") { searchInput.value = event.target.innerText; searchResult.innerHTML = ""; // 选中下拉列表中的内容，清空下拉列表 } }); 将这段内容中的数据解析换一种写法，其中能够正常解析出文本数据

可以将获取数据的部分改为使用XMLHttpRequest对象进行异步请求，如下所示：

let data = []; // 搜索的数据
const searchInput = document.getElementById("search");
const searchResult = document.getElementById("search-result");

// 从数据文本中解析出搜索数据
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    data = this.responseText.split("\n").filter((item) => item.trim() !== "");
  }
};
xhr.open("GET", "data.txt");
xhr.send();

searchInput.addEventListener("input", (event) => {
  const keyword = event.target.value.trim(); // 获取输入框中的值并去除首尾空格
  if (!keyword) {
    searchResult.innerHTML = ""; // 关键词为空，清空下拉列表
    return;
  }
  const matchedData = data.filter((item) =>
    item.includes(keyword)
  ); // 过滤出匹配的数据
  if (matchedData.length === 0) {
    searchResult.innerHTML = "<li>无匹配结果</li>"; // 没有匹配的数据
  } else {
    searchResult.innerHTML = matchedData
      .map((item) => `<li>${item}</li>`)
      .join(""); // 根据匹配的数据渲染下拉列表
  }
});

searchResult.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    searchInput.value = event.target.innerText;
    searchResult.innerHTML = ""; // 选中下拉列表中的内容，清空下拉列表
  }
});

这里使用XMLHttpRequest对象对data.txt进行异步请求，当请求成功后，将返回的文本数据解析为数组并赋值给data变量。