CodePen Embed - How to create searchable list data using html and pure Javascript?

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">





</head>
<body>

<div class="search-custom">
<input type="text" id="myInput" onkeyup="technicalFunction()" placeholder="Search try &#8220;surface preparation&#8220; " title="Search try surface preparation" />


<i aria-hidden="true" class="fas fa-search"></i>
</div>


<ul id="myUL">
  <li>
  <a href="#"><h1>TECHNICAL INFORMATION</h1></a>
  <a href="#"><h3>Conversion Table</h3></a>
  <a href="#"><p>Conversion Table 1</p></a>
  <a href="#"><p>Conversion Table 2</p></a>
  <a href="#"><p>Conversion Table 3</p></a>
  <a href="#"><p>Conversion Table 4</p></a>
  <a href="#"><h3>Preparation Method</h3></a>
  <a href="#"><p>BASIC SURFACE PREPARATION</p></a>
  <a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
  <a href="#"><p>CONCRETE FLOORS</p></a>
  <a href="#"><p>STEEL SURFACE PREPERATION</p></a>
  <a href="#"><p>SAFETY &amp; TECHNICAL</p></a>
  <a href="#"><p>TECHNICAL INFORMATION</p></a>
  <a href="#"><p>PAINT CALCULATION</p></a>
  </li>
  
 <li>
  <a href="#"><h1>SURFACE PREPARATION</h1></a>
  <a href="#"><h3>Conversion Table</h3></a>
  <a href="#"><p>Conversion Table 1</p></a>
  <a href="#"><p>Conversion Table 2</p></a>
  <a href="#"><p>Conversion Table 3</p></a>
  <a href="#"><p>Conversion Table 4</p></a>  
  <a href="#"><h3>Preparation Method</h3></a>
  <a href="#"><p>BASIC SURFACE PREPARATION</p></a>
  <a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
  <a href="#"><p>CONCRETE FLOORS</p></a>
  <a href="#"><p>STEEL SURFACE PREPERATION</p></a>
  <a href="#"><p>SAFETY &amp; TECHNICAL</p></a>
  <a href="#"><p>TECHNICAL INFORMATION</p></a>
  <a href="#"><p>PAINT CALCULATION</p></a>
  </li>
  
   <li>
  <a href="#"><h1>DYES, STAINS & COLORS</h1></a>
  <a href="#"><h3>Conversion Table</h3></a>
  <a href="#"><p>Conversion Table 1</p></a>
  <a href="#"><p>Conversion Table 2</p></a>
  <a href="#"><p>Conversion Table 3</p></a>
  <a href="#"><p>Conversion Table 4</p></a> 
  <a href="#"><h3>Preparation Method</h3></a>
  <a href="#"><p>BASIC SURFACE PREPARATION</p></a>
  <a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
  <a href="#"><p>CONCRETE FLOORS</p></a>
  <a href="#"><p>STEEL SURFACE PREPERATION</p></a>
  <a href="#"><p>SAFETY &amp; TECHNICAL</p></a>
  <a href="#"><p>TECHNICAL INFORMATION</p></a>
  <a href="#"><p>PAINT CALCULATION</p></a>
  </li>
  
   <li>
  <a href="#"><h1>ALKYD BASED PAINTS</h1></a>
  <a href="#"><h3>Conversion Table</h3></a>
  <a href="#"><p>Conversion Table 1</p></a>
  <a href="#"><p>Conversion Table 2</p></a>
  <a href="#"><p>Conversion Table 3</p></a>
  <a href="#"><p>Conversion Table 4</p></a>
  <a href="#"><h3>Preparation Method</h3></a>
  <a href="#"><p>BASIC SURFACE PREPARATION</p></a>
  <a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
  <a href="#"><p>CONCRETE FLOORS</p></a>
  <a href="#"><p>STEEL SURFACE PREPERATION</p></a>
  <a href="#"><p>SAFETY &amp; TECHNICAL</p></a>
  <a href="#"><p>TECHNICAL INFORMATION</p></a>
  <a href="#"><p>PAINT CALCULATION</p></a>
  </li>
   <li>
  <a href="#"><h1>ALKYD BASED PAINTS</h1></a>
  <a href="#"><h3>Conversion Table</h3></a>
  <a href="#"><p>Conversion Table 1</p></a>
  <a href="#"><p>Conversion Table 2</p></a>
  <a href="#"><p>Conversion Table 3</p></a>
  <a href="#"><p>Conversion Table 4</p></a>
  
  <a href="#"><h3>Preparation Method</h3></a>
  <a href="#"><p>BASIC SURFACE PREPARATION</p></a>
  <a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
  <a href="#"><p>CONCRETE FLOORS</p></a>
  <a href="#"><p>STEEL SURFACE PREPERATION</p></a>
  <a href="#"><p>SAFETY &amp; TECHNICAL</p></a>
  <a href="#"><p>TECHNICAL INFORMATION</p></a>
  <a href="#"><p>PAINT CALCULATION</p></a>
  </li>
</ul>


</body>
</html>

* {
  box-sizing: border-box;
}

#myInput[type=text]:focus {
    border: none;
    outline: none;
}

#myInput {
  width: 100%;
  font-size: 16px;
  padding: 12px 40px 12px 20px;
  border: none;
  margin-bottom: 12px;
  font-family: "Poppins", Sans-serif;
  margin: 0 auto;
  display: block
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 10px;
  
}

#myUL li {
width: 25%;
    float: left;
    padding: 10px 10px 30px 10px;
    font-family: "Poppins", Sans-serif;
  }

#myUL li a h1 {
  padding: 15px 20px;
  margin: 2px;
  font-size: 14px;
   background-color: #CF9945;
   color: #ffffff;
   text-align: center;
   font-family: "Poppins", Sans-serif;
}
#myUL li a h3 {
     padding: 20px 5px 5px 20px;
  margin: 0;
  font-size: 12px;
   color: #CF9945;
   text-align: left;
}
#myUL li a p {
      padding: 5px 5px 5px 20px;
  margin: 0;
  font-size: 12px;
   color: #787777;
   text-align: left;
   font-family: "Poppins", Sans-serif;
}

#myUL li a {
  padding: 0px;
  text-decoration: none;
  font-size: 12px;
  color: black;
  display: block
  font-family: "Poppins", Sans-serif;
}

.search-custom {
    position: relative;
    margin: 0 auto;
    max-width: 700px;
    border: 3px solid #CF9945;
    padding: 0px 10px 0px 0px;
}

.search-custom i {
    position: absolute;
    right: 20px;
    bottom: 15px;
    color: #CF9945;
}

function technicalFunction() {
    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";
        }
    }
}

Run Pen

This Pen is owned by vijay on CodePen.

See more by @vijaywaskrishna on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.