I have a HTML list items like this:

```
<ul id="fruits">
 <li><a href="#">Mango</a></li>
 <li><a href="#">Apple</a></li>
 <li><a href="#">Grape</a></li>
 <li><a href="#">Cherry</a></li>
</ul>

```

User will not see these items, as we are hiding them all with style `display: none;`.
User can search these items from below `input` field:

```
<input type="text" id="searchInput" onkeyup="fruitSearch()" placeholder="Search fruits">

```

When user start searching for a fruit name on the `input` field, it will list the matching names, just like google search suggestions.
using the below the JavaScript for search:

```
function fruitSearch() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("fruits");
    li = ul.getElementsByTagName('li');

    // Loop through all list items, and show those who match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

```

Everything is working as designed & expected until here, once the user clears the input field all the fruit list items `<li>` are visible now instead of hiding.

How do I reset the list items & hide them all, when user clears the `input` field?

<https://jsfiddle.net/kingBethal/cjbwomof/>