Question 209405 in Html Question posted in
Some basic documentation can be found here.

Html – Search Filter in javascript

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:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search