JavaScript实现数组对象数据搜索 筛选展示匹配姓名的人员条目

你可以直接按以下逻辑完善searchData函数：

• 遍历所有已渲染的.person人员卡片
• 提取每张卡片的姓名字段，和输入的搜索关键词做大小写不敏感的包含匹配
• 匹配到的卡片设置为显示，未匹配的设置为隐藏

完善后的代码如下：

function searchData(query) {
  // 关键词去首尾空格后转小写，实现大小写不敏感搜索
  const searchKey = query.trim().toLowerCase();
  // 遍历所有人员卡片
  $('.person').each(function() {
    // 取当前卡片的姓名文本也转小写
    const currentName = $(this).find('.name').text().toLowerCase();
    // 姓名包含关键词就显示，否则隐藏
    $(this).toggle(currentName.includes(searchKey));
  })
}

说明：代码中使用的jQuerytoggle()方法会自动根据传入的布尔值控制元素显隐，无需单独写判断分支调用show()/hide()。如果需要全字精确匹配而非模糊包含匹配，将includes改为===即可。

内容的提问来源于stack exchange，提问作者duong-manh-dung