Search code examples
javascripthtmlcsshide

Search Dropdown Javascript - How to hide list?

I'm a beginner in Javascript/HTML/CSS. So I'm sorry if I'm missing something obvious.

My Task: I want to create a search bar on my website (website for images). With this search bar the user should be able to search for "keywords" which I will determine in a list. Every item in my list should lead the user to a new html site.

My Problem: The list that i have created is visible under the search input. But I want to hide the list at first and just show the suggestions or matches from what the user enters in the search bar. But if I hide the list in css, it's obviously also not gonna show the matches when theres something typed in the input. I included code and screenshots at the bottom. Thanks!

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">
    
    <ul id="myUL">
      <li><a href="shuffle4.html">School</a></li>
      <li><a href="shuffle4.html">Sport</a></li>
      <li><a href="shuffle4.html">Tennis</a></li>
      <li><a href="shuffle4.html">Work</a></li>
      <li><a href="shuffle4.html">Funny</a></li>
      <li><a href="shuffle4.html">Money</a></li>
      <li><a href="shuffle4.html">Food</a></li>
    </ul>
    
    <script>
    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 < li.length; i++) {
            a = li[i].getElementsByTagName("a")[0];
            txtValue = a.textContent || a.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                li[i].style.display = "";
            } else {
                li[i].style.display = "none";
            }
        }
    }
    </script>

Screenshots: All the suggestions from my list are showing, how can i hide them if nothing is typed in the input?

Solution

  • You can use the same idea you've already used in the <li>, use display: none to hide the element, then on every call of myFunction(), check the content of the <input> and edit the <ul> style accordingly:

    // If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;


    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");

// If we've got more than 1 char in <input>, show it, otherwise, hide
const inputDisplay = input.value.length > 1 ? 'block' : 'none';
ul.style.display = inputDisplay;

for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}
}
    ul { display: none; }
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Topic.." title="Type in a name">

<ul id="myUL">
<li><a href="shuffle4.html">School</a></li>
<li><a href="shuffle4.html">Sport</a></li>
<li><a href="shuffle4.html">Tennis</a></li>
<li><a href="shuffle4.html">Work</a></li>
<li><a href="shuffle4.html">Funny</a></li>
<li><a href="shuffle4.html">Money</a></li>
<li><a href="shuffle4.html">Food</a></li>
</ul>