JavaScript用户ID搜索过滤问题：匹配结果需独立Div展示

问题 #

搭建了响应式容器并实现基于Id的用户列表过滤功能，但当前匹配的用户数据会合并到同一个div中展示，期望每个匹配用户的数据分别在独立div中呈现（例如搜索“12”时，Id包含“12”的用户各占一个独立div）。

当前代码 #

JS代码

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'}
];
function filter(){
    let input = document.getElementById("search").value;
    let container = document.getElementById("container");
    let div = document.createElement("div");
    container.appendChild(div);
    if(input === null || input === ''){
            console.log('empty');
    }else{
        for(let i=0; i<data.length; i++){
            if(data[i].Id.includes(input)){
                div.innerHTML += `
                    <p>Id: ${data[i]['Id']}</p>
                    <p>Name: ${data[i]['Name']}</p>
                    <p>Gender: ${data[i]['Gender']}</p>
                `
                container.appendChild(div);
                console.log(data[i]);
            }
        }
    }
}

CSS代码

html { font-size: 22px; }
body { padding: 1rem; }
#search {
    background-image: url('magnify.svg');
    background-position: 5px 5px 5px;
    background-repeat: no-repeat;
    font-size: 16px;
    padding: 12px 20px 12px 40px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}
button {
    font-size: 16px;
    padding: 12px 20px 12px 20px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.container > div{
    background-color: dodgerblue;
    color: white;
    padding: 0.5rem;
    height: 10rem;
}

HTML代码

<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>

期望效果 #

搜索“12”时，页面结构应为：

<input type="text" id="search" placeholder="Search.." value="12">
<button onClick="filter()">Test</button>
<div id="container" class="container">
    <div><p>Id: 123</p><p>Name: John Doe</p><p>Gender: Male</p></div>
    <div><p>Id: 312</p><p>Name: Peter Lee</p><p>Gender: Male</p></div>
</div>

解决方案 #

修改JS代码即可实现需求，核心调整点：

• 每次搜索前清空容器，避免重复追加内容
• 为每个匹配的用户单独创建新的div元素，而非复用同一个div

修改后的JS代码：

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'}
];
function filter(){
    let input = document.getElementById("search").value.trim();
    let container = document.getElementById("container");
    
    // 清空容器，避免重复展示旧结果
    container.innerHTML = '';
    
    if(!input){
        console.log('empty');
        return;
    }
    
    for(let i=0; i<data.length; i++){
        if(data[i].Id.includes(input)){
            // 为每个匹配用户创建独立的div容器
            let userDiv = document.createElement("div");
            userDiv.innerHTML = `
                <p>Id: ${data[i]['Id']}</p>
                <p>Name: ${data[i]['Name']}</p>
                <p>Gender: ${data[i]['Gender']}</p>
            `;
            container.appendChild(userDiv);
            console.log(data[i]);
        }
    }
}

说明 #

• CSS和HTML代码无需修改，保持原有样式和结构即可
• 新增trim()处理输入，避免空格导致的无效匹配
• 每次搜索先清空容器，确保展示结果是当前搜索的最新匹配项

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