Advanced Filter System

A flexible and powerful JavaScript library for filtering DOM elements with search, sorting, and range capabilities.

Get Started View Demo View on GitHub

Features

🎯 Flexible Filtering

Support for buttons, checkboxes, radio buttons, dropdowns, and custom filter types with configurable logic modes.

🔍 Real-time Search

Fuzzy search with customizable debouncing, multiple search keys, and instant results.

📊 Range Filters

Interactive sliders for numeric ranges, date ranges, and input ranges with histogram support.

🎨 Smooth Animations

Multiple animation types including fade, slide, scale, flip, and custom transitions.

📱 Responsive Design

Mobile-first design with touch support and adaptive layouts for all screen sizes.

⚙️ Highly Configurable

Extensive customization options for styling, behavior, pagination, and advanced filter logic.

Installation

Via npm

npm install advanced-filter-system

Via yarn

yarn add advanced-filter-system

Via CDN

<script type="module">
    import { AFS } from 'https://unpkg.com/advanced-filter-system@latest/dist/afs.modern.js';
</script>

Quick Start

1. HTML Structure

<div class="filter-container">
    <!-- Filter Controls -->
    <button class="btn-filter" data-filter="*">All</button>
    <button class="btn-filter" data-filter="category:tech">Technology</button>
    <button class="btn-filter" data-filter="category:design">Design</button>
    
    <!-- Search Input -->
    <input type="text" class="filter-search" placeholder="Search...">
    
    <!-- Results Counter -->
    <div class="filter-counter"></div>
    
    <!-- Filterable Items -->
    <div class="filter-item" 
         data-categories="category:tech" 
         data-title="Laptop">
        <h3>Premium Laptop</h3>
    </div>
    
    <div class="filter-item" 
         data-categories="category:design" 
         data-title="Notebook">
        <h3>Design Notebook</h3>
    </div>
    
    <!-- Pagination -->
    <div class="afs-pagination-container"></div>
</div>

2. JavaScript Initialization

import { AFS } from 'advanced-filter-system';

const afs = new AFS({
    // Required selectors
    containerSelector: '.filter-container',
    itemSelector: '.filter-item',
    filterButtonSelector: '.btn-filter',
    searchInputSelector: '.filter-search',
    counterSelector: '.filter-counter',
    
    // Search configuration
    searchKeys: ['title', 'categories'],
    
    // Filter logic (NEW!)
    filterCategoryMode: 'mixed', // OR within categories, AND between
    filterTypeLogic: {
        category: { mode: 'OR', multi: true },  // Multi-select OR
        brand: 'OR',                            // Toggle mode
        price: 'AND'                            // Multi-select AND
    },
    
    // Pagination
    pagination: {
        enabled: true,
        itemsPerPage: 6
    },
    
    // Animations
    animation: {
        type: 'fade',
        duration: 300
    }
});

3. Advanced Features

// Add range slider
afs.rangeFilter.addRangeSlider({
    key: 'price',
    container: '.price-range',
    min: 0,
    max: 1000,
    ui: { showHistogram: true }
});

// Add date range filter
afs.dateFilter.addDateRange({
    key: 'date',
    container: '.date-range',
    minDate: new Date('2024-01-01'),
    maxDate: new Date()
});

// Custom sorting
afs.filter.sortWithOrder('price', 'DESC');

// Event listeners
afs.on('filter:applied', (data) => {
    console.log(`Filtered: ${data.visible} of ${data.total} items`);
});

Filter Logic Modes

Mixed Mode (Recommended)

OR within categories, AND between categories

filterCategoryMode: 'mixed'
// Select: Tech OR Design 
// AND Premium OR Budget
// = Show items that are (Tech OR Design) 
//   AND (Premium OR Budget)

Per-Type Logic

Configure each filter type independently

filterTypeLogic: {
  category: { mode: 'OR', multi: true },
  brand: 'OR',     // Toggle mode
  price: 'AND'     // Multi-select AND
}

See It In Action

Try our comprehensive demo with all filter types, animations, and configurations.

Launch Interactive Demo