I am trying to build a basic search filter where you search and a certain image appears on screen and I am trying to do this with javascript or simple jquery , I cannot seem to make the search work, and I am also wondering if it is possible to do a search based on a class name?

Here is my HTML code

```
 <form onkeyup "function()" > 
      <input type="search" id = "myInput"  placeholder="Search.." name="search" >
    </form> 

 <ul id ="myUL">
    <li class="SupernaturalCookbook"><a href="SupernaturalCookbookProductPage.html"><img src="Images/SupernaturalCookbookCard.jpg" alt="SupernaturalCookbook"></a></li>

    <li class="MarkOfAthena"><a href="MarkOfAthena.html"><img src="Images/MarkOfAthenaCard.jpg" alt="MarkOfAthena"></a></li>

    <li class="Instinct"><a href="Instinct.html"><img src="Images/InstinctCard.jpg" alt="Instinct"></a></li>

    <li class="CaminoIsland"><a href="CaminoIsland.html"><img src="Images/CaminoIslandCard.jpg" alt="caminoisland"></a></li>

    <li class="TheLuckyOne"><a href="TheLuckyOne.html"><img src="Images/TheLuckyOneCard.jpg" alt="theluckyone"></a></li>

    <li class="TheWhistler"><a href="TheWhistler.html"><img src="Images/TheWhistlerCard.jpg" alt="thewhistler"></a></li>

    <li class="Greenlights"><a href="Greenlights.html"><img src="Images/GreenlightsCard.jpg" alt="greenlights"></a></li>

    <li class="SeaOfMonsters"><a href="SeaOfMonsters.html"><img src="Images/SeaOfMonstersCard.jpg" alt="seaofmonsters"></a></li>

    <li class="SerpentShadows"><a href="SerpentShadows.html"><img src="Images/SerpentShadowsCard.jpg" alt="serpentshadows"></a></li>

    <li class="FromCrookToCook"><a href="FromCrookToCook.html"><img src="Images/FromCrookToCookCard.jpg" alt="fromcrooktocook"></a></li>
</ul>

```

Here is my Javascript code:

```
var input = document.getElementById('myInput');
input.onkeyup = function () {
var filter = myInput.value.toUpperCase();
var lis = document.getElementsByTagName('li');
for (var i = 0; i < lis.length; i++) {
    var name = lis[i].getElementsByClassName('class')[0].innerHTML;
    if (name.toUpperCase().indexOf(filter) == 0) 
        lis[i].style.display = 'list-item';
    else
        lis[i].style.display = 'none';
}

```