list-filter

Simple library with no dependencies that help you to hide html list items or table rows that do not match a pattern

Table of Contents

• Demo
• Installation
• Usage
• Configuration
• Examples

Demo

Try it on JSFiddle

Installation

npm install --save @mp3000mp/list-filter

Usage

// This will create window.ListFilter
const ListFilter = require('list-filter')

Example

You have to create a new instance for binding a list to an input trigger

// on document ready
document.addEventListener('DOMContentLoaded', function(){
    let trigger = document.getelementById('my-trigger');
    let list = document.getelementById('my-list'); // works with table or ul element
    let options = {};

    let oListFilter = new ListFilter(trigger, list, options);
});

Configuration

Here are the key you can use to configure your instance

| Key | Type | Default | Description | |-------------------|----------------|---------|----------------------------------------------------------------------------------------------| | caseSensitive | boolean | false | Case sensitive search or not. | | keyupDelay | Number | 50 | Time in millisecond before refreshing the DOM. | | searchInAttribute | boolean or string | false | Data attribute used for comparison, innerHTML if false. | | onSearch | Callback | null | Function to run after each comparison, return true to display the element, false to hide it. | | onAfterSearch | Callback | null | Function to run after DOM refresh. | | | | |