json, html, js

[alena0309]

Здравствуйте. Имеется код:

fetch("users.json")
        .then(res=>res.json())
 
        .then(data=>{
            document.body.innerHTML = data.map((item)=>
                `
<div class="textcols-item show-modal">
<div class="trigger">
   <li style="list-style-type: none"><span class="name"><b><h3>${item.name}</h3></b></span></li>
  <br>
  <br>
   <i class="icono-iphone"></i> &nbsp ${item.phone}
  <br>
  <br>
   <i class="icono-mail"></i> &nbsp ${item.email}
   <br>
   </div>
   </div>
 
`).join(" ");
        })

Он выводит на html-страницу "карточки". Я никак не могу организовать фильтр-поиск по ним (сама форма тоже должна присутствовать на странице). Т.е. вводишь name юзера и у тебя на странице фильтруется по этому name. Как это сделать? Помогите, пожалуйста.

[ADSoft]

1) ну делаете формочку на html добавляете к старничке
2) на обработчик onChange поля ввода вешаете обработчик (в вашем случае лучше всего вывод карточек оформить отдельной функций)
3) добавляете filter для элементов по заданному условию