创建芝加哥员工搜索无匹配结果时的JS弹窗提示问题

嘿，这问题我熟！要实现无结果时的弹窗提示，核心就是在查询请求返回后，判断返回的结果集是否为空，我给你一步步拆解怎么改你的代码：

第一步：先明确你的API返回结构 #

首先得搞清楚你调用的那个员工搜索接口，返回的数据是什么样的？常见的两种情况：

1. 直接返回员工数据的数组：比如[{id:1, name:"张三"}, ...]
2. 返回包含统计信息和结果列表的对象：比如{total: 5, employees: [{...}, ...]}

这决定了你怎么判断“无结果”。

第二步：修改你的查询函数，加入无结果判断 #

我以最常用的fetch API为例，给你改好代码（如果你用的是jQuery/ajax或者XMLHttpRequest，逻辑是完全一致的）：

ChicagoEmployeesQuery = function(searchKey) {
  var url = "https://your-actual-api-url-here"; // 替换成你的真实接口地址

  // 发起查询请求
  fetch(`${url}?searchKey=${encodeURIComponent(searchKey)}`)
    .then(response => {
      // 先判断请求是否成功
      if (!response.ok) {
        throw new Error("请求失败");
      }
      return response.json();
    })
    .then(data => {
      // 这里根据你的API返回结构选对应的判断逻辑
      
      // 情况1：API直接返回员工数组
      if (data.length === 0) {
        alert("未找到匹配记录");
      } else {
        // 有结果时的处理逻辑，比如渲染员工列表
        renderEmployeeResults(data);
      }

      // ------------------------------
      // 情况2：API返回带total和列表的对象（比如{total:0, employees:[]}）
      // if (data.total === 0 || data.employees.length === 0) {
      //   alert("未找到匹配记录");
      // } else {
      //   renderEmployeeResults(data.employees);
      // }
    })
    .catch(error => {
      console.error("查询出错：", error);
      // 可选：请求失败时也给用户提示
      alert("查询失败，请稍后重试");
    });
};

关键注意点 #

• 一定要对应你的真实API返回结构调整判断条件！比如如果接口返回的是{success: true, data: []}，那判断的就是data.data.length === 0。
• 别忘了处理请求失败的情况（比如网络问题、接口报错），不然用户输入后没反应会很困惑。
• 如果你的弹窗不是用原生alert，而是自定义的模态框，把alert("未找到匹配记录")换成你自己的弹窗触发代码就行。

要是你能把API返回的示例数据贴出来，我还能帮你更精准地调整判断逻辑~

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