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

I’m really new to javascript. I’m trying to setup a page that fetches from a placeholder API( 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.

const searchInput = document.querySelector("[data-search]")

let html = []

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

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

    <title>Code Problem 4</title>
    <header><h1>Blog Post</h1></header>
    <div id="content">
        <form id="search" action="action_page.php">
            <input type="text" placeholder="Filter by User ID" name="search">
            <button type="submit" onclick="searchWithField()"><i class="fa fa-search"></i></button>
    <script src="resources/javascript/script.js"></script>
    <span class="shapes">&#9679; &#9652; &#9632;</span>