A Filterable List:
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" integrity="sha512-17AHGe9uFHHt+QaRYieK7bTdMMHBMi8PeWG99Mf/xEcfBLDCn0Gze8Xcx1KoSZxDnv+KnCC+os/vuQ7jrF/nkw==" crossorigin="anonymous" /> | |
| <title>My Contacts</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1 class="center-align"> | |
| My Contacts | |
| </h1> | |
| <input type="text" id="filterInput" placeholder="Search names.."> | |
| <ul id="names" class="collection with-header"> | |
| <li class="collection-header"> | |
| <h5>A</h5> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Abe</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Adam</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Alan</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Ana</a> | |
| </li> | |
| <li class="collection-header"> | |
| <h5>B</h5> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Beth</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Beth</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Bob</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Brad</a> | |
| </li> | |
| <li class="collection-header"> | |
| <h5>C</h5> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Carrie</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Cathy</a> | |
| </li> | |
| <li class="collection-item"> | |
| <a href="#">Courtney</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <script> | |
| //Get input element | |
| let filterInput = document.getElementById('filterInput'); | |
| //Add event Listener | |
| filterInput.addEventListener('keyup', filterNames); | |
| function filterNames(){ | |
| //Get value of input | |
| let filterValue = document.getElementById('filterInput').value.toUpperCase(); | |
| //Get names ul | |
| let ul = document.getElementById('names'); | |
| //Get lis from ul | |
| let li = ul.querySelectorAll('li.collection-item'); | |
| //Loop through collection-item lis | |
| for(let i=0; i<li.length; i++){ | |
| let a = li[i].getElementsByTagName('a')[0]; | |
| //If matched | |
| if(a.innerHTML.toUpperCase().indexOf(filterValue)>-1) { | |
| li[i].style.display = ''; | |
| } else{ | |
| li[i].style.display ='none'; | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Comments
Post a Comment