title: How can I do it by forEach()?
body: <p>I already did some work with a search bar and it's working. Now I want to do it with <code>forEach()</code> or <code>filter()</code> instead of for loop with pure Javascript. Here is my HTML and JS code. Can anybody help me?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function myFunction() {
    let input = document.getElementById('mySearch');
    let bind = input.value.toUpperCase();
  
    let ul = document.getElementById('myMenu');
    let li = ul.getElementsByTagName('li');
  
    for (let i = 0; i &lt; li.length; i++) {
      let a = li[i].getElementsByTagName('a')[0];
  
      if (a.innerHTML.toUpperCase().indexOf(bind) &gt; -1) {
        li[i].style.display = ''
      } else {
        li[i].style.display = 'none';
      }
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" onkeyup="myFunction()" id="mySearch" placeholder="Search.." title="Type in a category"&gt;
  &lt;ul id="myMenu"&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;HTML&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;CSS&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;JavaScript&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;PHP&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Python&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;jQuery&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;SQL&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Bootstrap&lt;/a&gt;
    &lt;/li&gt;
    &lt;li&gt;
      &lt;a href="#"&gt;Node.js&lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>