Filterable Contact List

Summary

A small javascript project where you can filter a contact list of people by their name.

In this example, initially all the names are listed on the page in a directory like structure.

When you enter a name into the input field only the matches will remain.

HTML

<div class="container">
  <h1 class="center-align">My Contacts</h1>

  <input type="text" id="filterInput" placeholder="Search Names" />

  <ul class="collection with-header" id="names">
    <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="#">Aiden</a>
    </li>
    <li class="collection-item">
      <a href="#">Allen</a>
    </li>
    <li class="collection-item">
      <a href="#">Alice</a>
    </li>
    <li class="collection-item">
      <a href="#">Anna</a>
    </li>
    <li class="collection-item">
      <a href="#">Avrill</a>
    </li>

    <li class="collection-header">
      <h5>B</h5>
    </li>
    <li class="collection-item">
      <a href="#">Bella</a>
    </li>
    <li class="collection-item">
      <a href="#">Beth</a>
    </li>
    <li class="collection-item">
      <a href="#">Bill</a>
    </li>
    <li class="collection-item">
      <a href="#">Bob</a>
    </li>
    <li class="collection-item">
      <a href="#">Brad</a>
    </li>
    <li class="collection-item">
      <a href="#">Braxton</a>
    </li>
    <li class="collection-item">
      <a href="#">Brody</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="#">Cathly</a>
    </li>
    <li class="collection-item">
      <a href="#">Courtney</a>
    </li>

    <li class="collection-header">
      <h5>D</h5>
    </li>
    <li class="collection-item">
      <a href="#">David</a>
    </li>
    <li class="collection-item">
      <a href="#">Debbie</a>
    </li>
    <li class="collection-item">
      <a href="#">Doug</a>
    </li>

    <li class="collection-header">
      <h5>E</h5>
    </li>
    <li class="collection-item">
      <a href="#">Edward</a>
    </li>
    <li class="collection-item">
      <a href="#">Emily</a>
    </li>
    <li class="collection-item">
      <a href="#">Emma</a>
    </li>
    <li class="collection-item">
      <a href="#">Evan</a>
    </li>
    <li class="collection-item">
      <a href="#">Eve</a>
    </li>
  </ul>
</div>

JS

// 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 li from ul

  let li = ul.querySelectorAll('li.collection-item');

  // loop through collection item li

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

    // if matches

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

Tech and Tools

• JavaScript
• CSS
• HTML
• JS Fiddle

Demo

Open demo on JS Fiddle.

Link to Demo