JavaScript客户端搜索栏实现指南：DOM操作与数据过滤两种策略

<!-- HTML 结构示例 -->
<input type="text" class="search-input" onkeyup="searchProfiles()" placeholder="搜索学生姓名、ID或圈子...">

<div class="profile-container">
    <div class="profile-card">
        <h3>Alice Johnson</h3>
        <p>ID: 101</p>
        <p>Track: Frontend</p>
        <p>Circle: Alpha</p>
        <!-- 更多学生信息 -->
    </div>
    <div class="profile-card">
        <h3>Bob Smith</h3>
        <p>ID: 102</p>
        <p>Track: Backend</p>
        <p>Circle: Beta</p>
        <!-- 更多学生信息 -->
    </div>
    <!-- 更多 profile-card 元素 -->
</div>

<script>
    function searchProfiles() {
        // 1. 获取搜索输入框的值，并转换为小写以实现大小写不敏感搜索
        let input = document.querySelector(".search-input").value.toLowerCase();

        // 2. 获取所有待过滤的 profile-card 元素
        let profileCards = document.getElementsByClassName('profile-card');

        // 3. 遍历每个 profile-card 元素
        for (let i = 0; i < profileCards.length; i++) {
            let card = profileCards[i];
            // 获取卡片内部的全部文本内容，并转换为小写
            let cardContent = card.innerHTML.toLowerCase();

            // 4. 判断卡片内容是否包含搜索关键词
            if (cardContent.includes(input)) {
                // 如果包含，则显示该卡片
                card.style.display = "block";
            } else {
                // 如果不包含，则隐藏该卡片
                card.style.display = "none";
            }
        }
    }
</script>

<style>
    /* 简单的样式，确保 profile-card 默认是块级元素 */
    .profile-card {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
        display: block; /* 默认显示 */
    }
</style>

<!-- HTML 结构示例 -->
<input type="text" class="search-input-json" onkeyup="searchStudentsJson()" placeholder="搜索学生姓名、ID或圈子...">

<div class="students-list-container">
    <!-- 学生列表将在这里动态渲染 -->
</div>

<script>
    // 假设这是从后端获取的原始学生数据
    let allStudentsData = []; 

    // 模拟数据获取
    async function fetchAllStudents() {
        // 实际应用中这里会是一个API调用，例如：
        // const res = await fetch('/api/students');
        // const data = await res.json();
        // allStudentsData = data.students;

        // 模拟数据
        allStudentsData = [
            { id: 1, name: "Alice Johnson", stuId: 101, track: "Frontend", circle: "Alpha", description: "Passionate about UI/UX.", socialmedia: { linkedin: "#", github: "#" } },
            { id: 2, name: "Bob Smith", stuId: 102, track: "Backend", circle: "Beta", description: "Loves server-side development.", socialmedia: { linkedin: "#", github: "#" } },
            { id: 3, name: "Charlie Brown", stuId: 103, track: "Fullstack", circle: "Alpha", description: "All-rounder developer.", socialmedia: { linkedin: "#", github: "#" } },
            { id: 4, name: "Diana Prince", stuId: 104, track: "Frontend", circle: "Gamma", description: "Focus on performance.", socialmedia: { linkedin: "#", github: "#" } },
            { id: 5, name: "Eve Adams", stuId: 105, track: "DevOps", circle: "Beta", description: "Automates everything.", socialmedia: { linkedin: "#", github: "#" } }
        ];
        renderStudents(allStudentsData); // 初始渲染所有学生
    }

    // 渲染学生列表的函数
    function renderStudents(studentsToRender) {
        const container = document.querySelector(".students-list-container");
        container.innerHTML = ''; // 清空现有内容

        if (studentsToRender.length === 0) {
            container.innerHTML = '<p>没有找到匹配的学生。</p>';
            return;
        }

        studentsToRender.forEach(student => {
            const { id, name, stuId, track, img, description, socialmedia } = student;
            const studentCard = `
                <div class="profile-card">
                    <h3>${name}</h3>
                    <p>ID: ${stuId}</p>
                    <p>Track: ${track}</p>
                    <p>Circle: ${circle}</p>
                    <p>${description}</p>
                    <!-- 更多信息和社交媒体链接 -->
                </div>
            `;
            container.innerHTML += studentCard; // 简单地追加HTML
        });
    }

    // 搜索函数
    function searchStudentsJson() {
        let input = document.querySelector(".search-input-json").value.toLowerCase().trim();

        // 如果输入为空，则显示所有学生
        if (input === "") {
            renderStudents(allStudentsData);
            return;
        }

        // 使用 filter 方法过滤原始数据
        let filteredStudents = allStudentsData.filter(item => {
            // 将搜索字段转换为小写进行比较，并处理数值类型
            const nameMatch = item.name.toLowerCase().includes(input);
            const stuIdMatch = String(item.stuId).includes(input); // 将数值转为字符串进行包含性检查
            const circleMatch = item.circle.toLowerCase().includes(input);

            return nameMatch || stuIdMatch || circleMatch;
        });

        // 根据过滤结果重新渲染页面
        renderStudents(filteredStudents);
    }

    // 页面加载时获取并渲染初始数据
    document.addEventListener('DOMContentLoaded', fetchAllStudents);
</script>