<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <title>Elements list</title>
</head>

<body>
    
    <div class="container">
        <h1 class="center-align">Electronic elements</h1>
        <input type="text" id="filter" placeholder="Search items">
        <ul id="elements" class="collection with-header">
            <li class="collection-header">
                C
            </li>
            <li class="collection-item">
                <a>Capacitor</a>
            </li>
            <li class="collection-item">
                <a>Coil</a>
            </li>
            <li class="collection-header">
                M
            </li>
            <li class="collection-item">
                <a>Microcontroler</a>
            </li>
            <li class="collection-item">
                <a>Multimeter</a>
            </li>
            <li class="collection-header">
                P
            </li>
            <li class="collection-item">
                <a>Photoresistor</a>
            </li>
            <li class="collection-item">
                <a>Potentiometer</a>
            </li>
            <li class="collection-header">
                R
            </li>
            <li class="collection-item">
                <a>Radiator</a>
            </li>
            <li class="collection-item">
                <a>Resistor</a>
            </li>
        </ul>
    </div>
</body>
</html>
let inputFilter = document.querySelector('#filter');
      inputFilter.addEventListener('keyup', filterNames);

      function filterNames(){
        let filterName = document.querySelector('#filter').value.toUpperCase();
        let ul = document.querySelector('#elements');
        let li = ul.querySelectorAll('li.collection-item');

        for(i=0; i < li.length; i++){
            let a = li[i].getElementsByTagName('a')[0];

            if(a.innerHTML.toUpperCase().indexOf(filterName) > -1){
                li[i].style.display = ''
            }else{
                li[i].style.display = 'none';
            }
        }

        console.log(filterName);
      }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.