JavaScript 中实现用户 ID 搜索过滤并动态渲染独立卡片

以下是优化后的完整实现：

let data = [
    {Id: '123', Name: 'John Doe', Gender: 'Male'},
    {Id: '213', Name: 'Wilma Gil', Gender: 'Female'}, 
    {Id: '312', Name: 'Peter Lee', Gender: 'Male'},
    {Id: '421', Name: 'Chezka Ong', Gender: 'Female'}
];

const inputField = document.getElementById("search");
const container = document.getElementById("container");

function filter() {
    const input = inputField.value.trim(); // 使用 trim() 防止空格干扰
    container.innerHTML = ""; // 清空容器，确保无残留

    if (!input) {
        console.log('搜索输入为空');
        return;
    }

    // 筛选匹配项 → 映射为 HTML 字符串 → 合并为单个字符串
    const html = data
        .filter(user => user.Id.includes(input)) // 支持子串匹配（如 "12" 匹配 "123" 和 "312"）
        .map(({ Id, Name, Gender }) => `
            <div class="person">
                <p><strong>ID:</strong> ${Id}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/c1c2c2ed740f" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">Java免费学习笔记（深入）</a></a>”；</p>
                <p><strong>姓名:</strong> ${Name}</p><div class="aritcle_card flexRow">
                                                        <div class="artcardd flexRow">
                                                                <a class="aritcle_card_img" href="/ai/1155" title="Figma"><img
                                                                                src="https://img.php.cn/upload/ai_manual/000/000/000/175680114120401.png" alt="Figma"  onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
                                                                <div class="aritcle_card_info flexColumn">
                                                                        <a href="/ai/1155" title="Figma">Figma</a>
                                                                        <p>Figma 是一款基于云端的 UI 设计工具，可以在线进行产品原型、设计、评审、交付等工作。</p>
                                                                </div>
                                                                <a href="/ai/1155" title="Figma" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
                                                        </div>
                                                </div>
                <p><strong>性别:</strong> ${Gender}</p>
            </div>
        `)
        .join("");

    container.innerHTML = html;
}

// 可选：支持回车键触发搜索
inputField.addEventListener('keyup', (e) => {
    if (e.key === 'Enter') filter();
});

配套 HTML 结构（保持原有语义与样式）：

<input type="text" id="search" placeholder="搜索用户 ID..." />
<button onclick="filter()">搜索</button>
<div id="container" class="container"></div>

? 关键改进点说明：

• ✅ 清空容器前置：每次调用 filter() 前执行 container.innerHTML = ""，避免重复叠加；
• ✅ 独立卡片结构：每个匹配用户都包裹在单独的
  中，完美适配 .container > div 的 Grid 样式（如背景色、高度、间距）；
• ✅ 健壮性增强：使用 .trim() 处理首尾空格；用 !input 替代 === null || === '' 更简洁安全；
• ✅ 可维护性提升：逻辑清晰分离（筛选 → 渲染 → 插入），便于后续扩展字段或添加高亮、分页等功能。

? 小贴士：若需大小写不敏感匹配，可将 user.Id.includes(input) 改为 user.Id.toLowerCase().includes(input.toLowerCase())；如需精确匹配（而非子串），则替换为 user.Id === input。

至此，输入 "12" 将正确渲染两个独立卡片：ID: 123 和 ID: 312，完全符合响应式网格布局预期。