Advanced Filter System

A flexible, dependency-free JavaScript library for filtering DOM elements with search, sorting, ranges, pagination and URL state built in.

Try the demo Get started GitHub

Features

Flexible filtering

Buttons, checkboxes, radios and dropdowns, with configurable OR / AND / mixed logic per filter type.

Real-time search

Debounced text search across any number of data attributes.

Range filters

Numeric sliders with optional histogram, min/max inputs and date ranges.

Pagination

Page controls, items-per-page, smooth scroll-to-top all aware of active filters.

URL state

The full filter state lives in the URL: shareable, restorable, back-button friendly.

Animations & TypeScript

Fade, slide, scale, flip and more plus complete TypeScript definitions.

Installation

npm

npm install advanced-filter-system

CDN

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

Quick start

1 · HTML

<button class="btn-filter" data-filter="*">All</button>
<button class="btn-filter" data-filter="category:tech">Tech</button>
<button class="btn-filter" data-filter="category:design">Design</button>

<input type="text" class="filter-search" placeholder="Search…">
<div class="filter-counter"></div>

<div class="filter-container">
  <div class="filter-item" data-categories="category:tech" data-title="Laptop">Laptop</div>
  <div class="filter-item" data-categories="category:design" data-title="Notebook">Notebook</div>
</div>

<div class="afs-pagination-container"></div>

2 · JavaScript

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

const afs = new AFS({
  containerSelector: '.filter-container',
  itemSelector: '.filter-item',
  filterButtonSelector: '.btn-filter',
  searchInputSelector: '.filter-search',
  counterSelector: '.filter-counter',
  searchKeys: ['title', 'categories'],

  filterCategoryMode: 'mixed',           // OR within a type, AND between types
  filterTypeLogic: {
    category: { mode: 'OR', multi: true },
  },

  pagination: { enabled: true, itemsPerPage: 6 },
  animation: { type: 'fade', duration: 300 },
});

3 · Going further

// Range slider
afs.rangeFilter.addRangeSlider({
  key: 'price',
  type: 'number',
  container: document.querySelector('.price-range'),
  min: 0,
  max: 1000,
});

// Date range
afs.dateFilter.addDateRange({
  key: 'date',
  container: document.querySelector('.date-range'),
});

// Sorting
afs.sort.sort('price', 'desc');

// Events
afs.on('filtersApplied', ({ visibleItems }) => {
  console.log(`${visibleItems} items visible`);
});

Filter logic modes

Mixed mode (recommended)

OR within a filter type, AND between types.

filterCategoryMode: 'mixed'
// (Tech OR Design) AND (Premium OR Budget)

Per-type logic

Configure each filter type independently.

filterTypeLogic: {
  category: { mode: 'OR', multi: true },
  brand: 'OR',   // exclusive toggle
  tags: 'AND',   // must match all
}

See it in action

One page, every feature: filters, search, ranges, sorting, pagination and URL state.

Launch interactive demo