How do I filter Fetch API results with a search bar in vanilla JS?

I’m really new to javascript. I’m trying to setup a page that fetches from a placeholder API(https://jsonplaceholder.typicode.com/posts) and displays the Title, Author(which I had to add) as well as the Body. I’m also trying to give the ability to use the search bar to filter the results by userId. I got some help a few days ago getting the data from the API to show on my page but I’ve been struggling to get the search bar to work. Doe’s anyone have any ideas on how to get it to work? Any help is greatly appreciated.

Edit: I thought I found a solution but I can’t seem to get it to work. I updated the code to reflect what I’m trying. Sorry if I’m missing simple stuff.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="resources/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

   
    <title>Code Problem 4</title>
</head>
<body>
    <header><h1>Blog Post</h1></header>
    <div id="content">
        <h2>Posts</h2>
        <div class="search-wrapper">
            <input type="search" id="search" placeholder="Filter by UserId" data-search>
          </div>
    </div>
    <script src="resources/javascript/script.js"></script>
</body>
<footer>
    <span class="shapes">&#9679; &#9652; &#9632;</span>
 </footer>
</html>
const searchInput = document.querySelector("[data-search]")

let html = []

searchInput.addEventListener("input", e => {
    const value = e.target.value.toLowerCase()
    html.forEach(post => {
      const isVisible =
        posts.userId.toLowerCase().includes(value)
      posts.element.classList.toggle("hide", !isVisible)
    })
  })

Promise.all([1, 22, 33, 44, 55, 66, 77, 88, 95, 99].map(id =>
    fetch(`https://jsonplaceholder.typicode.com/posts/${id}`, {
        method:'PATCH',
        body: JSON.stringify({
            name: "John Doe",
    }),
    headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    },
})
        .then((response) => response.json())))
            .then(data => {
        console.log(data);
        const html = data.map(posts => {
            return `
            <div class="post">    
                <p id="title">${posts.title}</p>
                <p id="author">${posts.name}</p>
                <p id="body">${posts.body}</p>
            </div>`
        }).join(' ');
        console.log(html);
        document.querySelector('#content').insertAdjacentHTML('beforeend', html);
    })
;