Newbee
July 17, 2023
224 views
1 vote
2 Answers

I have an responsive container for users. I made a simple filtering that will show list of user depend on their Id.

Current

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>

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… )

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>

If you can help me to figure out this, It helps a lot.

Tags: html javascript

Answers

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

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);
      }
    }
  }
}

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;
}

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

You need the let div = document.createElement("div"); INSIDE the loop

But here is a much simpler version

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("");
}

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>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Search Filter in javascript

Current

Want to achieve(*sample search: ’12’ will show… )

Answers