Фильтр поиска в 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.info('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.info(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>

Если вы можете помочь мне понять это, это очень поможет.

🤔 А знаете ли вы, что...
JavaScript обеспечивает обработку ошибок с использованием конструкции try...catch.

[РЕШЕНО]Перейти к решению

Javascript273878 вопросов Html113619 вопросов

Ответы:

Переместите let div = document.createElement("div"); внутрь функции else, чтобы создать div только при совпадении id. По сути, это создаст новый div. Также измените сетку css со столбца на строку

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.info('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>

Решено

Вам нужно let div = document.createElement("div"); ВНУТРИ петли

Но вот гораздо более простой вариант

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.info('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>

Фильтр поиска в javascript

Текущий

Хотите достичь (* образец поиска: «12» покажет...)

Ответы:

Интересные вопросы для изучения