title: Hiding elements when a textbox empty
body: <p>I am unable to hide the <code>myUL li</code> elements if the textbox is empty. Any ideas? Thanks in advance.</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-html lang-html prettyprint-override"><code>&lt;input type="text" id="myInput" onKeyUp="myFunction()" placeholder="Just begin typing.." title="Detail Index"&gt;
  &lt;ul id="myUL"&gt;
    &lt;li&gt;&lt;a href="/year/2000.html" target="_blank"&gt;2000&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/year/2001.html" target="_blank"&gt;2001&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="/year/2002.html" target="_blank"&gt;2002&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;script&gt;
    function myFunction() {
      var input, filter, ul, li, a, i, txtValue;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myUL");
      li = ul.getElementsByTagName("li");
      for (i = 0; i &lt; li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
          li[i].style.display = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>