test.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>


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

            
            #myMenu li a:hover {
            background-color: #eee;
            white-space: nowrap;
            }
        </style>
</head>

<body>
    <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>
    <script>
        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";
            }
          }
        }
        </script>    
</body>
</html>
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.." title="Type in a category">


<footer class="container">
  <p class="float-right"><a href="#">Back to top</a></p>
  <p>© 2017-2020 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>