Lista de contactos filtrables con JavaScript

Vista prévia

Descripción

Hace uso de JavaScript para permitir que una entrada de búsqueda filtre su lista de contactos larga.

Funcionamiento

Agregue una entrada de búsqueda a la lista de contactos como estas:

<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="#">Anna</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="#">Bill</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="#">Connor</a>

</li>

<li class="collection-item">


<a href="#">Courtney</a>

</li>
</ul>
</div>

El principal JavaScript para habilitar la funcionalidad del filtro.

// Get input element
let filterInput = document.getElementById('filterInput');

// Add event listener
filterInput.addEventListener('keyup', filterNames);

function filterNames() {

console.log('in filterNames');

// Get value of input

let filterValue = document.getElementById('filterInput').value.toUpperCase();

console.log(filterValue);

// 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 -> a.innerHTML grabs whatever is inside the 'a' tag


 if (a.innerHTML.toUpperCase().indexOf(filterValue) > -1) {



 li[i].style.display = '';


 } else {



 li[i].style.display = 'none';


 }

 }
}