如何为JavaScript+JSON开发的搜索栏设置页面加载时的默认搜索结果

问题原因 #

你当前仅为搜索框绑定了input事件触发搜索逻辑，该事件只有在用户手动操作输入框时才会触发，页面初始化加载阶段不会主动执行搜索函数，因此搜索框默认值对应的结果不会自动展示。

解决方法 #

只需要在原有代码基础上，增加页面加载完成后主动调用搜索函数的逻辑即可，修改后的完整代码如下：

const search = document.getElementById("search");
const matchList = document.getElementById("match-list");

// 可选优化：缓存JSON数据避免每次搜索重复请求
let workerList = null;
const getWorkerList = async () => {
  if (!workerList) {
    const res = await fetch("workers.json");
    workerList = await res.json();
  }
  return workerList;
}

const searchWorker = async (searchText) => {
  const states = await getWorkerList();
  let matches = states.filter((state) => {
    const regex = new RegExp(`${searchText}`, "gi");
    return state.name.match(regex);
  });
  if (searchText.length === 0) {
    matches = [];
    matchList.innerHTML = "";
  }
  outputHtml(matches);
};

const outputHtml = (matches) => {
  if (matches.length > 0) {
    const html = matches
      .map(
        (match) => `<div class=" search-result">
            <a href="${match.portfolio}">
            ${match.name} - ${match.age}<br/>
            <small>Salary - ${match.salary}</small>
            </a></div>
            `
      )
      .join("");
    matchList.innerHTML = html;
  }
};
search.addEventListener("input", () => searchWorker(search.value));

// 新增：页面DOM加载完成后主动触发默认搜索
document.addEventListener('DOMContentLoaded', () => {
  searchWorker(search.value);
})

补充说明 #

• 新增的DOMContentLoaded事件监听会等待页面DOM结构完全加载解析后再执行搜索，避免出现获取不到搜索框元素或者默认值的问题
• 如果你不需要数据缓存优化，直接删除getWorkerList相关代码，恢复原有的fetch逻辑，只保留最后主动调用searchWorker的代码也可以实现需求
• 原有代码中输出薪资的字段拼写有误，已将Salery修正为标准拼写Salary

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