Javascript 如何按名字和姓氏筛选此列表？

我需要搜索栏按名字和姓氏筛选结果，如此链接所示

在这个问题上我很为难。欢迎提供任何援助

谢谢大家!

const apiInfo = $('.info');
const avg = (arr) => arr.reduce((acc, x) => acc + x, 0) / arr.length;

const renderStudentInfo = (student, $target) => {
  const fullName = student.firstName + ' ' + student.lastName,
    average = avg(student.grades.map(grade => parseInt(grade, 10)));
  $target.append($(`
    <div class="infoB">
      <img class="pPic float-left m-3"
        src="${student.pic}" alt="profile pic" />
      <h4 class="title">${fullName}<h4>
      <p class="mb-1 stats">Email: ${student.email}</p>
      <p class="mb-1 stats">Comapny: ${student.company}</p>
      <p class="mb-1 stats">Skill: ${student.skill}</p>
      <p class="mb-1 stats">Average: ${average.toFixed(2)}%</p>
      <a href=# id="plus"><i class="mb-5 fa fa-plus float-right"></i></a>
    </div>
  `));
};

const init = () => {
  $.ajax({
    url: 'https://api.hatchways.io/assessment/students',
    method: 'GET',
  }).then(({ students }) => {
    students.forEach((student) => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
      }
    });
  });
}

init();

您需要存储所有用户

处理输入“输入”事件

清除apinfo DOM节点

用过滤过的学生填充它

这是1、2、3、4所需的代码

...
const avg = (arr) => arr.reduce((acc, x) => acc + x, 0) / arr.length; // Your code

// #2
const nameSeachInput = $('#nameSearch');
nameSeachInput.on('input',
  function() {
    apiInfo.empty();    // #3
    // #4
    allStudents.filter(student => student.firstName.toLowerCase().includes(this.value.toLowerCase()) || student.lastName.toLowerCase().includes(this.value.toLowerCase())).forEach(student => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
      }
    });
  });
let allStudents;    // #1

再给#1多一点

body{
    background-color: rgb(243, 240, 240);
}

img{
    border-radius: 50%;
    border: solid rgb(156, 148, 148) 1px;
    min-width: 130px;
}

.infoB{
    border-bottom: solid grey 1px;
}

.stats{
    color: grey;
    margin-left: 175px;
}

.title{
    font-size: 50px;
}

.card {
    margin-top: 100px;
}

.scroll {
    max-height: 575px;
    overflow-y: auto;
}

.fa-plus{
    color: grey;
    font-size: 50px;
}

...
const avg = (arr) => arr.reduce((acc, x) => acc + x, 0) / arr.length; // Your code

// #2
const nameSeachInput = $('#nameSearch');
nameSeachInput.on('input',
  function() {
    apiInfo.empty();    // #3
    // #4
    allStudents.filter(student => student.firstName.toLowerCase().includes(this.value.toLowerCase()) || student.lastName.toLowerCase().includes(this.value.toLowerCase())).forEach(student => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
      }
    });
  });
let allStudents;    // #1

...
method: 'GET',
  }).then(({
    students
  }) => {
    allStudents = students;    // 1
    students.forEach((student) => {
      if (student.id.includes('')) {
        renderStudentInfo(student, apiInfo);
...