Как перезаписывать элементы DOM согласно запросов поиска JS

Question

Как сделать так, чтобы при нажатии на кнопку поиск у меня отрисовывались все формы, что добавил администратор, при этом если нашёл одну форму, то только одну и показывает, если 3( и 1 формы нету с этих 3 - их) то показываются новые(текущие) 3 формы, а старые запросы удаляются. То есть должно динамично отрисовываться, интересует именно решение на js без jquery.

let cures = [];
let cure;

function sendCure(name, description) {
  cure = {
    name: name,
    description: description
  };
  cures.push(cure);
}



function getCure() {
  let elem1 = document.getElementById('cure_').value;
  let elem2 = document.getElementById('descriptionForCure').value;

  sendCure(elem1, elem2);

  getListContent();




}

function getListContent() {
  document.body.insertAdjacentHTML("afterend", `<form id="alert"><h4>Назва: ${cure.name}</h4>
              <h4>Опис: ${cure.description}</h4>
 </form>`)

}




function searchCure() {

  let result;

  let search = document.getElementById('search_obj').value;

  let objectOfSearching = cures.filter(el => el.name.includes(search));

  for (let i = 0; i <= objectOfSearching.length; i++) {
    let target = document.getElementById('button__');
    result = target.insertAdjacentHTML("afterend", `<div id="alert2"><h4>назва:${objectOfSearching[i].name}</h4></div>`);


  }
  return result;
}

body{
    margin: 0 auto;
}
.cure_form {
    margin-left: 20px;
    width: 200px;
     box-shadow: 0 0 10px rgba(0,0,0,0.5);;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
    background-color: aliceblue;
}
input {
    border: 1px solid black;
    border-radius: 1em;
}

.button_send {
    margin-top: 10px;

}
.button_send:hover {
    background-color: #CCCCCC;
}
#alert {  margin-left: 20px;
    width: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
    background-color: aliceblue;
}
#search_obj {
margin-top: -50%;
    margin-left: 50%;
}
#alert2 {  margin: 0 auto;
    width: 200px;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);;
    padding: 1em;
    border: 1px solid #CCC;
    border-radius: 1em;
    background-color: aliceblue;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>

  <form name="my" class="cure_form">
    <h4>Назва ліків</h4>
    <input value="" id="cure_"> <br>
    <h4>Застосовувати при</h4>
    <input value="" id="descriptionForCure"> <br>
    <input type="button" value="Додати ліки" class="button_send" onclick="getCure()">
  </form>
  <input type="search" id="search_obj" placeholder="Ввод...">
  <input type="button" value="Пошук" id="button__" onclick="searchCure()">

</body>

</html>

Answer 1

Не уверен, что это то, что нужно вам.

const searchInput = document.querySelector('.search'); 
const valueInput = searchInput.value; 
const cardNodeList = document.querySelectorAll('.card');  

searchInput.addEventListener('input', () => {  

  for (const cardNode of cardNodeList) {  
    const title = cardNode.children[0].textContent.toLowerCase();  
    if (title.startsWith(searchInput.value.toLowerCase())) { 
      cardNode.classList.remove('hidden');
    } 
    else { 
      cardNode.classList.add('hidden');
    }
  }
})

/* Этот normalize используется в этом компоненте для нормализации стилей.  */
*,
*:before,
*:after {
  box-sizing: border-box;
  vertical-align: top;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  font-size: inherit;
  text-decoration: none;
  font-family: "Roboto", sans-serif;
}  

html, body { 
  background-color: rgb(177, 33, 33);
  height: 100%; 
}   

.wrapper { 
  max-width: 90%; 
  padding: 15px;
  margin: 0 auto;
} 

.search {  
  max-width: 100%;
  padding: 5px;
  background-color: #fff;
  border: none;
  outline: none;
}

.cards {
  display: flex; 
  justify-content: space-between;
  padding: 5px;
  background-color: #fff; 
  height: 100px;
} 

.card { 
  padding: 10px;
  background-color: black;
}

.title { 
  color: #fff;
} 

.text { 
  color: #fff;
}

.hidden {
  display: none;
}

<body> 
    <div class="wrapper">  
        <input class="search" type="text">
    </div>    
    <div class="wrapper">  
        <div class='cards'>  
            <div class="card"> 
             <h2 class="title">Тема</h2> 
             <p class="text">sd</p>
            </div> 
        </div>
    </div> 
    <script src="script.js"></script>
  </body>

Удалять конечно тоже можно, есть в js методы, но тогда нужно думать как еще и возвращать, я думаю, это лишнее и усложнит работу код да и в целом проекта. Я пошел путем через добавить/удалить класс. На том же react при рендоре можно указать null, тогда компонент не будет зарендрин.

БЛОГ НА HUSL

Как перезаписывать элементы DOM согласно запросов поиска JS

Ответы (1 шт):