filter-list v1.5.2

filter-list

Filter/search through an HTML list.

Installation

npm install filter-list --save

Next you can import the library.

//in your app.js or similar file
import filterList from 'filter-list';

Alternatively you can link to the library directly:

<script src="./node_modules/filter-list/src/filter-list.js"></script>

Usage

Here's a simple example.

<input type="text" id="myInput" placeholder="Search for names..">

<ul id="myUL">
  <li><a href="#" class="header">A</a></li>
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#" class="header">B</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#" class="header">C</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<script>
var myInput = document.getElementById('myInput');

myInput.addEventListener('keyup', function() {
  var ul = document.getElementById('myUL');

  filterList(myInput, ul);
});
</script>