W3Schools Tryit Editor

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css">
<body>

<div class="w3-container">
  <h2>Filter List</h2>
  <p>Search for a name in the input field.</p>

<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
  <ul class="w3-ul w3-margin-top" id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
    <li>Calvin</li>
    <li>Christina</li>
    <li>Cindy</li>
  </ul>
</div>

</body>
</html>

​x
 
<!DOCTYPE html><html><title>W3.CSS</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://www.w3schools.com/w3css/5/w3.css"><body>​<div class="w3-container">  <h2>Filter List</h2>  <p>Search for a name in the input field.</p>​  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">  <ul class="w3-ul w3-margin-top" id="myUL">    <li>Adele</li>    <li>Agnes</li>    <li>Billy</li>    <li>Bob</li>    <li>Calvin</li>    <li>Christina</li>    <li>Cindy</li>  </ul></div>​<script>function myFunction() {  var input, filter, ul, li, a, i;  input = document.getElementById("myInput");  filter = input.value.toUpperCase();  ul = document.getElementById("myUL");  li = ul.getElementsByTagName("li");  for (i = 0; i < li.length; i++) {    txtValue = li[i].textContent || li[i].innerText;    if (txtValue.toUpperCase().indexOf(filter) > -1) {      li[i].style.display = "";    } else {      li[i].style.display = "none";    }  }}</script>​</body></html>​