已获取学生API数据，如何实现姓名（名+姓）文本输入筛选功能？

我来帮你搞定这个姓名筛选的问题！你已经成功获取了学生数据，接下来只需要两步就能实现需求：添加搜索输入框，再写个简单的筛选逻辑。

1. 添加文本搜索输入框 #

首先在你的HTML里添加一个输入框，用来接收用户的搜索关键词：

<input type="text" id="searchInput" placeholder="搜索学生姓名...">

2. 实现同时匹配名和姓的筛选逻辑 #

核心思路是：

• 先把获取到的学生数据（包含计算好的平均分）保存下来，方便后续重复使用
• 监听输入框的输入事件，每次输入时根据关键词筛选学生列表
• 把学生的全名（名+姓）和搜索关键词都转成小写，用includes()方法判断是否匹配，这样不管输入名、姓还是全名都能生效

下面是修改后的完整代码，我帮你整合了所有逻辑：

// 全局变量存储所有学生数据（已处理平均分）
let allStudents = [];

// 创建DOM节点的工具函数（补全你原代码里的createNode逻辑）
function createNode(tag) {
  return document.createElement(tag);
}

// 渲染学生列表的函数
function renderStudents(students) {
  // 先清空现有列表（假设页面中有一个ul容器，id为studentList）
  const studentList = document.getElementById('studentList');
  studentList.innerHTML = '';

  students.forEach(student => {
    const li = createNode('li');
    const img = createNode('img');
    const infoWrap = createNode('div');

    img.src = student.pic;
    // 调整HTML结构，避免嵌套li的不规范写法
    infoWrap.innerHTML = `
      <b>${student.firstName} ${student.lastName}</b><br>
      ${student.company}<br>
      ${student.email}<br>
      Average: ${student.average}
    `;

    li.appendChild(img);
    li.appendChild(infoWrap);
    studentList.appendChild(li);
  });
}

// 搜索处理函数
function handleSearch() {
  const searchTerm = document.getElementById('searchInput').value.toLowerCase();
  // 筛选匹配姓名的学生
  const filteredStudents = allStudents.filter(student => {
    const fullName = `${student.firstName} ${student.lastName}`.toLowerCase();
    return fullName.includes(searchTerm);
  });
  // 重新渲染筛选后的列表
  renderStudents(filteredStudents);
}

// 初始化数据并渲染
const url = 'https://www.hatchways.io/api/assessment/students';
fetch(url)
  .then(resp => resp.json())
  .then(data => {
    // 处理学生数据，计算平均分并保存到全局变量
    allStudents = data.students.map(student => {
      // 用reduce简化平均分计算
      const sum = student.grades.reduce((total, grade) => total + parseInt(grade, 10), 0);
      const average = sum / student.grades.length;
      // 返回包含平均分的新对象，保留原数据的其他字段
      return {
        ...student,
        average: average
      };
    });
    // 初始渲染所有学生
    renderStudents(allStudents);
    // 给输入框添加实时监听事件
    document.getElementById('searchInput').addEventListener('input', handleSearch);
  })
  .catch(error => {
    console.log('获取数据失败:', error);
  });

关键细节说明： #

• 把你原来的循环求和改成了reduce方法，代码更简洁高效
• 修复了原代码中span嵌套li的不规范HTML结构
• 将处理后的学生数据存入全局变量allStudents，避免每次搜索重复请求API
• 筛选时统一转成小写，实现不区分大小写的搜索，提升用户体验
• 监听输入框的input事件，用户每输入一个字符都会实时更新筛选结果

这样就能实现你想要的效果啦，输入学生的名、姓或者全名，列表都会实时筛选出匹配的学生。

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