Javascript 如何添加一个文本输入，用户可以通过他们的名字（名字和姓氏）过滤学生列表

我正在尝试创建一个文本搜索，在这里我可以过滤api中的名称

它应该是这样的：

我能够成功地从api中获取所有信息。我只是很难创建一个过滤器来搜索名字和姓氏

我的API如下所示：

fetch（url）.then（（resp）=>resp.json（））.then（函数（数据）{
让学生=数据。学生；
返回student.map（函数（student）{
让价值观=学生成绩；
让firstName=student.firstName；
var总和=0；
对于（变量i=0；i${firstNames}${student.lastName}
${student.company}
${student.email}
平均值：${avg}
`；
})
})
.catch（函数（错误）{
log（JSON.stringify（error））；
})

首先，我们修复您的代码，使其运行并生成有效的HTML（span没有LIs）

使用第一个LI内容使用动态正则表达式进行筛选

const data=JSON.parse（`{“学生”：[{“城市”：“Fushë-Muhurr”，“公司”：“Yadel”，“电子邮件”：”iorton0@imdb.com“，”姓氏“：”英格贝格“，”等级“：”78“，”100“，”92“，”86“，”89“，”88“，”91“，”87“，”身份证“：”1“，”姓氏“：”奥尔顿“，”图片“："https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasdictablanditiis.jpg“，”技能“：”甲骨文“}，{”城市“：”桑汉“，”公司“：”阿瓦姆“，”电子邮件“：”cboards1@weibo.com“，”姓氏“：”克拉克“，”成绩“：”75“，”89“，”95“，”93“，”99“，”82“，”89“，”76“，”身份证“：”2“，”姓氏“：”董事会“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/voluptasautreprehenderit.jpg“，”技能“：”体育“}，{”城市“：”库格西“，”公司“：”斯卡利斯“，”电子邮件“：”lromanet2@wired.com“，”姓氏“：”劳伦斯“，”等级“：”[“88”，“90”，“79”，“82”，“81”，“99”，“94”，“73”]，”身份证“：”3“，”姓氏“：”罗曼内特“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/aspernaturnonsapiente.jpg“，”技能“：”员工手册“}，“{”城市“：”克拉扬“，”公司“：”Mybuzz“，”电子邮件“：”bskitt3@aboutads.info“，”姓氏“：”贝尔蒂“，”成绩“：”[“88”，“93”，“92”，“81”，“95”，“98”，“77”，“94”]，”身份证“：”4“，”姓氏“：”斯基特“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autautdeserunt.jpg“，”技能“：”营养教育“}，{”城市“：”惠琦“，”公司“：”Avavee“，”电子邮件“：”msummerley4@craigslist.org“，”姓“：”穆雷尔“，”年级“：”71“，”81“，”72“，”92“，”79“，”82“，”91“，”90“，”id“：”5“，”姓“：”萨默利“，”图": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/consequaturdelectusquis.jpg“，”技能“：”ISO 14971“}，“{”城市“：”江红“，”公司“：”Twinte“，”电子邮件“：”rcoryndon5@cargocollective.com“，”姓氏“：”罗宾“，”年级“：”[“97”，“92”，“72”，“99”，“92”，“92”，“79”，“96”]，“id:”6“，”姓氏“：“科林顿”，“图片”：https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autautdeserunt.jpg“，”技能“：”电影4D“}，{”城市“：”三西“，”公司“：”嗡嗡声“，”电子邮件“：”seykel6@examiner.com“，”姓氏“：”希娜“，”等级“：”[“74”、“95”、“75”、“95”、“85”、“97”、“88”、“85”]，”身份证“：”7“，”姓氏“：”艾克尔“，”图“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/utquamut.jpg“，”技能“：”Ulead VideoStudio“}，{”城市“：”环城“，”公司“：”EdgeLab“，”电子邮件“：”mewen7@ycombinator.com“，”姓“：”敏妮“，”年级“：”[“80”，“100”，“97”，“78”，“99”，“99”，“76”，“85”]，“id:”8“，”姓“：”埃文“，”图": "https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/nesciuntrerumlibero.jpg“，”技能“：”火神“}，{”城市“：”罗雄“，”公司“：”法迪奥“，”电子邮件“：”riban8@hubpages.com“，”姓氏“：”Rory“，”等级“：”[“70”，“100”，“75”，“96”，“83”，“90”，“94”，“92”]，”id“：”9“，”姓氏“：”Iban“，”pic“：”"https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/autemporroplaceat.jpg“，”技能“：”EE4“}，{”城市“：”土伦“，”公司“：”亚基多“，”电子邮件“：”lroxby9@cam.ac.uk“，”姓氏“：”Lenna“，”等级“：”[“70”，“99”，“81”，“83”，“78”，“95”，“81”，“76”]，“id:”10“，”姓氏“：”Roxby“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/doloribusquitempora.jpg“，”技能“：”LPS“}，{”城市“：”拉佐“，”公司“：”照片列表“，”电子邮件“：”rfitzalana@parallels.com“，”姓氏“：”罗莎琳“，”年级“：”[“98”，“93”，“78”，“87”，“99”，“89”，“97”，“81”]，“id:”11“，”姓氏“：”菲扎兰“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/utquamut.jpg“，”技能“：”地理“}，{”城市“：”比丘拉“，”公司“：”语言风暴“，”电子邮件“：”srapellib@adobe.com“，”姓“：”斯蒂芬妮“，”年级“：”83“，”97“，”70“，”96“，”75“，”98“，”90“，”71“，”身份证“：”12“，”姓“：”拉佩利“，”图片“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/enimpariaturoptio.jpg“，”技能“：”身份管理“}，“{”城市“：”奇瓦希尼“，”公司“：”密特“，”电子邮件“：”mmacdirmidc@plala.or.jp“，”姓氏“：”梅尔“，”年级“：”[“87”、“73”、“85”、“98”、“73”、“95”、“75”、“97”]，”身份证“：”13“，”姓氏“：”麦克迪米德“，”图“：”https://storage.googleapis.com/hatchways-app.appspot.com/assessments/data/frontend/images/aspernaturnonsapiente.jpg“，”技巧“：“户外广告”}