JavaScript加载JSON渲染卡片后搜索功能失效如何解决

你的代码存在3个核心问题，导致筛选无法生效：

• 未存储全量数据+未触发DOM更新：JSON加载完成后你没有保存解析后的全量卡片数据，给搜索框绑定keyup事件时，createHTMLCard接收到的参数是键盘事件对象而非卡片数组；且事件触发后仅返回了拼接好的HTML字符串，没有将内容写入卡片容器，页面会一直保留首次加载的全部卡片内容。
• 匹配逻辑不符合搜索需求：使用===做完全精确匹配，仅当输入内容和卡片名称完全一致时才会匹配，输入部分关键词无法命中；且搜索框为空时没有展示全量卡片的逻辑，首次加载若搜索框为空甚至会出现空白。
• 存在DOM规范问题：循环生成的卡片按钮都使用了同一个idmoreInfo，id在页面中必须唯一，后续绑定按钮交互事件会出现异常。

HTML部分（无需改动，保持原有结构即可） #

<input id="searchbar" type="text" name="search" placeholder="Search...">
<div class="row" id="divResult"></div>

Script部分 #

<script>
    const divRes = document.querySelector('#divResult');
    // 声明全局变量存储全量卡片数据
    let allCards = [];

    const myRequest = () => {
        let xhr = new XMLHttpRequest();
        xhr.open('GET', 'files/elements.json', true);
        xhr.send();
        xhr.onload = function() {
            if (xhr.readyState === xhr.DONE) {
                if (xhr.status != 200) {
                    divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
                } else {
                    // 把加载到的全量数据存入全局变量
                    allCards = JSON.parse(xhr.responseText);
                    // 首次加载渲染全量卡片
                    renderCards();
                }
            }
        };

        xhr.onerror = function() {
            divRes.innerHTML = "Request failed";
        };
    }

    const renderCards = () => {
        let res = '';
        // 获取搜索关键词
        const keyword = document.getElementById('searchbar').value.trim().toLowerCase();
        
        // 遍历全量卡片筛选
        allCards.forEach(obj => {
            // 关键词为空直接展示，否则匹配名称包含关键词的卡片
            if (!keyword || obj.name.toLowerCase().includes(keyword)) {
                res +=
                    `<div class="col-lg-4 col-md-6 col-sm-12">
                        <div class="card m-2">
                            <div class="card-body">
                                <h5 class="card-title">${obj.name}</h5>
                                <p><strong>Prijs:</strong> ${obj.price}</p>
                                <!-- 重复id改为class，符合DOM规范 -->
                                <button class="moreInfo btn btn-primary">More info</button>
                            </div>
                        </div>
                    </div>`;       
            }
        })
        // 把渲染结果写入容器，更新页面
        divRes.innerHTML = res;
    }

    // 搜索框输入时触发渲染
    document.querySelector('#searchbar').addEventListener('keyup', renderCards);
    window.addEventListener('load', myRequest);
</script>

• 新增全局变量allCards存储从JSON加载的全量卡片数据，避免筛选时拿不到数据源
• 把原createHTMLCard重构为renderCards渲染函数，不依赖传入参数，直接读取全局数据和搜索框关键词，每次执行后主动更新容器DOM
• 把精确匹配改为includes包含匹配，支持关键词模糊搜索，搜索框为空时默认展示全部卡片
• 将重复的按钮id改为class，避免后续交互出现异常

内容的提问来源于stack exchange，提问作者cdo