英文:
Search Filter in javascript
问题
以下是您的代码的翻译部分：
我有一个响应式容器供用户使用。我做了一个简单的过滤，将根据他们的**Id**显示用户列表。
# 现在的状态
```javascript
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]);
}
}
}
}
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;
}
<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>
现在，我正在获取数据并显示在我的HTML文件中。但问题是，每次显示数据时，它都会缩小为一个div。似乎我漏掉了什么。
我希望的是，当我搜索Id与其他用户相同时，它将在我的HTML数据中显示单独的div。当前，所有数据都合并在一个div中。
想要实现的效果（示例搜索：'12'将显示...）
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;
}
<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>
如果您可以帮助我解决这个问题，那将非常有帮助。
英文:
I have an responsive container for users. I made a simple filtering that will show list of user depend on their Id.
Current
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-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]);
}
}
}
}
<!-- language: lang-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;
}
<!-- language: lang-html -->
<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>
<!-- end snippet -->
Now, I'm getting the data and it show in my HTML file. BUT the problem is, every time it will show data, it will shrink in one div. It seems that I'm missing something.
I want is when I search Id have the same with other user it will show in my html data in separate div. Currently, all data is merged in one div.
Want to achieve(*sample search: '12' will show... )
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-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;
}
<!-- language: lang-html -->
<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>
<!-- end snippet -->
If you can help me to figure out this, It helps a lot.
答案1
得分: 2
在循环内部，您需要将以下代码放置在循环内部：
let div = document.createElement("div");
但这里有一个更简单的版本：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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'}
];
const inputField = document.getElementById("search");
const container = document.getElementById("container");
const filter = () => {
const input = inputField.value;
container.innerHTML = "";
if (input === null || input === '') {
console.log('empty');
return;
}
container.innerHTML = data
.filter(({Id}) => Id.includes(input))
.map(({ Id, Name, Gender }) => `
<div class="person">
<p>Id: ${Id}</p>
<p>Name: ${Name}</p>
<p>Gender: ${Gender}</p>
</div>`)
.join("");
}
<!-- language: lang-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;
}
<!-- language: lang-html -->
<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>
<!-- end snippet -->
英文:
You need the let div = document.createElement("div"); INSIDE the loop
But here is a much simpler version
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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'}
];
const inputField = document.getElementById("search");
const container = document.getElementById("container");
const filter = () => {
const input = inputField.value;
container.innerHTML = "";
if (input === null || input === '') {
console.log('empty');
return;
}
container.innerHTML = data
.filter(({Id}) => Id.includes(input))
.map(({ Id, Name, Gender }) => `
<div class="person">
<p>Id: ${Id}</p>
<p>Name: ${Name}</p>
<p>Gender: ${Gender}</p>
</div>`)
.join("");
}
<!-- language: lang-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;
}
<!-- language: lang-html -->
<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>
<!-- end snippet -->
答案2
得分: 1
将let div = document.createElement("div");移动到else函数内部，这样只有在id匹配时才创建div。基本上，它会创建一个新的div。还将CSS网格从列更改为行。
if (input === null || input === '') {
console.log('empty');
} else {
for (let i = 0; i < data.length; i++) {
if (data[i].Id.includes(input)) {
let div = document.createElement("div");
div.innerHTML += `
<p>Id: ${data[i]['Id']}</p>
<p>Name: ${data[i]['Name']}</p>
<p>Gender: ${data[i]['Gender']}</p>
`;
container.appendChild(div);
}
}
}
.container {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 1rem;
grid-auto-flow: row; // 在这里更改
}
.container>div {
background-color: dodgerblue;
color: white;
padding: 0.5rem;
height: 10rem;
}
希望这有所帮助。
英文:
Move let div = document.createElement("div"); inside the else function so you create div only when the id matches. Basically it will create a new div. Also change the the css grid from column to row
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-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'
},
{
Id: '123',
Name: 'John Doe',
Gender: 'Male'
},
];
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)) {
let div = document.createElement("div");
div.innerHTML += `
<p>Id: ${data[i]['Id']}</p>
<p>Name: ${data[i]['Name']}</p>
<p>Gender: ${data[i]['Gender']}</p>
`
container.appendChild(div);
}
}
}
}
<!-- language: lang-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-auto-flow: row; // changed here
}
.container>div {
background-color: dodgerblue;
color: white;
padding: 0.5rem;
height: 10rem;
}
<!-- language: lang-html -->
<input type="text" id="search" placeholder="Search..">
<button onClick="filter()">Test</button>
<div id="container" class="container">
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论