живой поиск на чистом javascript

let users = [{
    name: "Артем :",
    number: 7911234345
  },
  {
    name: "Настя :",
    number: 7449234345
  },
  {
    name: "Илья :",
    number: 7932234345
  },
  {
    name: "Витя :",
    number: 7911134345
  },
  {
    name: "Антон :",
    number: 7917884345
  },
  {
    name: "Вика :",
    number: 7999734345
  },
  {
    name: "Игорь :",
    number: 7945634345
  },
];

users.map((item) => {
  const newDiv = document.createElement("div");
  const Svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  Svg.setAttribute("style", "border: 1px solid black");
  Svg.setAttributeNS(
    "http://www.w3.org/2000/xmlns/",
    "xmlns:xlink",
    "http://www.w3.org/2000/xlink"
  );
  const IconBox = document.createElement("div");
  const newDiv2 = document.createElement("div");
  const newDiv3 = document.createElement("div");
  const H1 = document.createElement("h1");
  const H2 = document.createElement("h1");
  const Item = document.createTextNode(`${item.name}`);
  const Item2 = document.createTextNode(`${item.number}`);

  H2.classList.add("wrapper__profilesItem");
  H1.classList.add("wrapper__profilesItem1");
  newDiv.classList.add("wrapper__profiles");
  newDiv2.classList.add("wrapper__profilesBox");
  Svg.classList.add("wrapper__heartIcon");

  div.appendChild(newDiv);
  newDiv.appendChild(H1);
  newDiv.appendChild(H2);
  newDiv.appendChild(Svg);
  H1.appendChild(Item);
  H2.appendChild(Item2);
});

document.onclick = function(event) {
  if (event.target.tagName == "svg") {
    event.target.classList.toggle("--active");
    const Parent = event.target.parentNode;
    Parent.parentNode.classList.toggle("--Active");
  }
};

const Input = document.querySelector("#search");
console.log(Input);

Input.oninput = function() {
  let val = this.value.trim();
  let userItems = document.querySelector(".wrapper__items div");
  console.log(userItems);
  if (val != "") {
    userItems.forEach(function(elem) {
      if (elem.innerText.search(val == -1)) {
        elem.classList.add("hide");
        console.log(elem.innerText);
      } else {
        elem.classList.add("hide");
      }
    });
  } else {
    userItems.forEach(function(elem) {
      elem.classList.remove("hide");
    });
  }
};

.wrapper {

    background-color: white;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-direction: column;

}

body {
    margin: 0;
    padding: 0;
}

.wrapper__header {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 1px solid black;
}

.wrapper__input {
    padding: 10px;
    border-radius: 9px;
    margin: 10px;
}


.wrapper__body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.wrapper__items {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.wrapper__profiles {
    display: flex;
    flex-direction: row;
    position: relative;
    column-gap: 5px;
    border: 1px solid #000;
    border-radius: 8px;
    margin: 5px;
    user-select: none;
}


.wrapper__profilesItem {
    font-size: 29px;
    padding: 10px;
    user-select: none;
}

.wrapper__heartIcon {
    width: 40px;
    height: 40px;
    position: absolute;
    right: 0;
    border-radius: 8px;
}

.--active {
    background-color: #000;
    fill: #000;

}

.--Active {
    order: -1;
    top: 0px;
}

.hide {
    display: none;
}

<div class="wrapper">
  <div class="wrapper__header"><input type="search" placeholder="поиск" class="wrapper__input" id='search'></div>
  <div class="wrapper__body">
    <div id='div' class="wrapper__items"></div>
  </div>
</div>