Try Demo

Advanced Filter System

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

Get Started View on GitHub

Live Demo

Filter by price with histogram enabled

Filter by ratings

Filter by sales

Filter by date

Installation

Via npm

npm install advanced-filter-system

Via yarn

yarn add advanced-filter-system

Via CDNs

<!-- Include the library -->
<script src="https://unpkg.com/advanced-filter-system@1.1.1/dist/afs.modern.js"></script>

Usage Guide

Basic Setup

HTML Structure

Basic HTML structure for the Advanced Filter System, including filter controls, filterable items, and pagination container. 

<div class="afs-filter-container">
    <!-- Filter Controls -->
    <div class="afs-filter-controls">
        <!-- Basic Filters -->
        <div class="basic-filters">
            <button class="afs-btn-filter" data-filter="*">All</button>
            <button class="afs-btn-filter" data-filter="category:tech">Technology</button>
            <button class="afs-btn-filter" data-filter="category:design">Design</button>
        </div>
        
        <!-- Search Input -->
        <input type="text" class="afs-filter-search" placeholder="Search...">
        
        <!-- Results Counter -->
        <div class="afs-filter-counter"></div>
    </div>
        
    <!-- Filterable Items -->
    <div class="afs-filter-items">
        <div class="afsfilter-item" 
                data-categories="category:tech price:high" 
                data-title="Premium Laptop"
                data-price="1299"
                data-tags="computer electronics premium">
            <!-- Item content -->
        </div>
    </div>

    <!-- Pagination Container -->
    <div class="afs-pagination-container"></div>
</div>

Complete JavaScript Initialization

Complete configuration options for Advanced Filter System initialization, including all available settings and their default values.

Configuration Notes:

  • Required options are marked at the top of the configuration
  • All other options will use their default values if not specified
  • Style configurations can be customized for each component
  • Animation settings affect all transitions in the system
  • Debug options are helpful during development and troubleshooting
import { AFS } from 'advanced-filter-system';

const afs = new AFS({
    // Required Selectors
    containerSelector: '.afs-filter-container',
    itemSelector: '.afs-filter-item',
    filterButtonSelector: '.afs-btn-filter',
    searchInputSelector: '.afs-filter-search',
    counterSelector: '.afs-filter-counter',
    
    // CSS Classes
    activeClass: 'active',
    hiddenClass: 'hidden',
    
    // Filter & Search Configuration
    filterMode: 'OR',      // or 'AND'
    searchKeys: ['title'], // attributes to search
    debounceTime: 300,    // search input delay
    
    // Debug Options
    debug: false,
    logLevel: 'info',     // 'debug', 'info', 'warn', 'error'
    
    // Date Handling
    dateFormat: 'YYYY-MM-DD',
    
    // Counter Configuration
    counter: {
        template: 'Showing {visible} of {total}',
        showFiltered: true,
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
        formatter: (num) => num.toLocaleString()
    },
    
    // Slider Configuration
    slider: {
        containerClass: 'afs-range-slider',
        trackClass: 'afs-range-track',
        thumbClass: 'afs-range-thumb',
        valueClass: 'afs-range-value',
        selectedClass: 'afs-range-selected'
    },
    
    // Pagination Configuration
    pagination: {
        enabled: false,
        itemsPerPage: 10,
        container: '.afs-pagination-container',
        pageButtonClass: 'afs-page-button',
        activePageClass: 'afs-page-active',
        containerClass: 'afs-pagination',
        scrollToTop: false,
        scrollOffset: 50,
        scrollBehavior: 'smooth'  // or 'auto'
    },

    // Animation Configuration
    animation: {
        duration: 300,
        type: 'fade',
        easing: 'ease-out',
    }
});