title: UI not being updated by the result of fetch
body: <p>I am trying to load search results based on what the user typed (responsive search), I thought it was my event as I wanted it more responsive e.g <code>keyup</code> but it didn't work. Here is working <a href="https://codepen.io/codearts/pen/NWNLvpg?editors=1111" rel="nofollow noreferrer">codepen</a>
  and following in my code. I had been struggling for hours now. What am I doing wrong?</p>
  <pre><code>function generateHTML(el,toggleClass){
      const div = document.createElement(&quot;div&quot;);
      const card = div.classList.add(&quot;card&quot;,&quot;col-sm-6&quot;, &quot;col-md-6&quot;, &quot;col-lg-3&quot;, &quot;m-2&quot;,toggleClass);
      div.innerHTML = `
          &lt;a href='#' class=&quot;products&quot;&gt; 
          &lt;img src=&quot;${el.image}&quot; class=&quot;card-img-top rounded&quot; alt=&quot;${el.title}&quot;&gt;
           &lt;div class=&quot;card-body&quot;&gt;
               &lt;h5 class=&quot;card-title&quot;&gt;${(slicer(el.title))}&lt;/h5&gt;
           &lt;/div&gt;
           &lt;/a&gt;
      `
      grid.appendChild(div);
  }
  </code></pre>