Is there a way to modify a Search Menu to hide the menu before typing?

Question

(See the code below.)

I'd like to hide the menu options before typing into the search.

I'd also ideally like to require a 2 or 3 character match before displaying results.

The hiding has priority.

I have attempted to change numerical values and the display attribute. The initial CSS overrides, as I'm sure is the standard behavior.

   
    function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i;
      input = document.getElementById("mySearch");
      filter = input.value.toUpperCase();
      ul = document.getElementById("myMenu");
      li = ul.getElementsByTagName("li");
    
      // Loop through all list items, and hide those who don't 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 = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }
   

    /* Style the search box */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
    }
    
    /* Style the navigation menu */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }
    
    /* Style the navigation links */
    #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block
    }
    
    #myMenu li a:hover {
      background-color: #eee;
    }

    <input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>

Answer 1

this should get you started. let me know if you need more help

function myFunction() {
      // Declare variables
      var input, filter, ul, li, a, i;
      input = document.getElementById("mySearch");
      
      var sbv = input.value
      
      filter = input.value.toUpperCase();
      ul = document.getElementById("myMenu");
      
      if (sbv.length > 2){
         ul.style.display = "block"
      }else{
         ul.style.display = "none"
      }
      
      li = ul.getElementsByTagName("li");
    
      // Loop through all list items, and hide those who don't 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 = "";
        } else {
          li[i].style.display = "none";
        }
      }
    }

/* Style the search box */
    #mySearch {
      width: 100%;
      font-size: 18px;
      padding: 11px;
      border: 1px solid #ddd;
      
    }
    
    /* Style the navigation menu */
    #myMenu {
      list-style-type: none;
      padding: 0;
      margin: 0;
      display:none;
    }
    
    /* Style the navigation links */
    #myMenu li a {
      padding: 12px;
      text-decoration: none;
      color: black;
      display: block
    }
    
    #myMenu li a:hover {
      background-color: #eee;
    }

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">
    
    <ul id="myMenu">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">PHP</a></li>
      <li><a href="#">Python</a></li>
      <li><a href="#">jQuery</a></li>
      <li><a href="#">SQL</a></li>
      <li><a href="#">Bootstrap</a></li>
      <li><a href="#">Node.js</a></li>
    </ul>