Interactive Demo

Explore all filtering methods with live examples

Filter Configuration

Mode:

All items

Custom Logic Configuration

OR (Toggle): Single selection only (exclusive) | OR (Multi-select): Multiple selections with OR logic | AND (Multi-select): Multiple selections with AND logic

Categories: OR(M)

Brands: OR(M)

Features: OR(M)

Filter Controls

Brands

Features

▶ 📝 Configuration Example

// Initialize Button AFS
const afs = new AFS({
    containerSelector: '#content-buttons',
    itemSelector: '.filter-item',
    filterButtonSelector: '.btn-filter',
    searchInputSelector: '.filter-search',
    counterSelector: '.filter-counter',
    searchKeys: ['title', 'categories'],
    filterCategoryMode: 'mixed',
    filterTypeLogic: {
        category: { mode: 'OR', multi: true },  // Multi-select OR
        brand: { mode: 'OR', multi: true },     // Multi-select OR
        features: { mode: 'OR', multi: true }   // Multi-select OR
    },
    debug: true,
    counter: {
        template: 'Showing {visible} of {total} items',
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
    },
    animation: {
        type: 'fade',
        duration: 300
    }
});

Filter Configuration

Mode:

All items

Custom Logic Configuration

Note: Regular select dropdowns are single-selection by nature. OR (Multi-select) behaves the same as OR (Toggle) for dropdowns.

Native HTML <select multiple> creates a list box (not a dropdown) with poor UX. For true multi-select, use checkboxes or buttons instead.

Categories: OR(M)

Brands: OR(M)

Features: OR(M)

Filter Controls

Brands

Features

HTML Multi-Select Demonstration

Regular Select ✅

Nice dropdown UI, single selection only

Native Multi-Select ❌

List box UI, requires Ctrl/Cmd, confusing

Better Alternative ✅

Technology Fashion Food Books

Clear multi-select UI, no keyboard needed

▶ 📝 Configuration Example

// Initialize Select AFS
const selectAfs = new AFS({
    containerSelector: '#content-select',
    itemSelector: '.filter-item',
    filterButtonSelector: '.select-btn-filter:not([data-filter-type])',
    searchInputSelector: null,  // No search for select tab
    counterSelector: '.select-filter-counter',
    searchKeys: ['title', 'categories'],
    filterCategoryMode: 'mixed',
    filterTypeLogic: {
        category: { mode: 'OR', multi: true },  // Multi-select OR
        brand: { mode: 'OR', multi: true },     // Multi-select OR
        features: { mode: 'OR', multi: true }   // Multi-select OR
    },
    debug: true,
    counter: {
        template: 'Showing {visible} of {total} items',
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
    },
    animation: {
        type: 'fade',
        duration: 300
    }
});

Note: Select dropdowns with multi-mode allow multiple active filters simultaneously. Items show when they match at least one selected option per filter type.

Filter Configuration

Mode:

All items

Radio Button Logic: Fixed OR (Toggle) behavior - only one selection allowed per group. This matches natural radio button UI behavior.

▶ 📝 Configuration Example

// Initialize Radio AFS
const radioAfs = new AFS({
    containerSelector: '#content-radio',
    itemSelector: '.filter-item',
    filterButtonSelector: '.radio-btn-filter',
    searchInputSelector: '.radio-filter-search',
    counterSelector: '.radio-filter-counter',
    searchKeys: ['title', 'categories'],
    filterCategoryMode: 'mixed',
    filterTypeLogic: {
        category: 'OR',    // Single selection (exclusive)
        brand: 'OR',       // Single selection (exclusive)
        features: 'OR'     // Single selection (exclusive)
    },
    debug: true,
    counter: {
        template: 'Showing {visible} of {total} items',
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
    },
    animation: {
        type: 'fade',
        duration: 300
    }
});

Note: Radio buttons naturally support single selection per group. Perfect for exclusive category filtering.

Filter Configuration

Mode:

All items

Flexible Logic Control:
Configure the logic for each filter type independently!
• OR Logic (Toggle Mode): Only one selection allowed per category - selecting switches between options
• AND Logic (Multi-Select): Multiple selections allowed - all selected filters must match the item
• Between categories: Always AND logic (must match at least one from each active category)

Custom Logic Configuration

OR (Toggle): Single selection only (exclusive) | OR (Multi-select): Multiple selections with OR logic | AND (Multi-select): Multiple selections with AND logic

Categories: OR(M)

Brands: OR(M)

Features: OR(M)

Note: Checkboxes naturally support multiple selections. Use OR logic when items need ANY selected value, or AND logic when items need ALL selected values.

▶ 📝 Configuration Example

// Initialize Checkbox AFS
const checkboxAfs = new AFS({
    containerSelector: '#content-checkbox',
    itemSelector: '.filter-item',
    filterButtonSelector: '.checkbox-btn-filter',
    searchInputSelector: '.checkbox-filter-search',
    counterSelector: '.checkbox-filter-counter',
    urlStateKey: 'checkboxFilters',  // Unique URL state
    searchKeys: ['title', 'categories'],
    filterCategoryMode: 'mixed',
    filterTypeLogic: {
        category: { mode: 'OR', multi: true },  // Multi-select OR
        brand: { mode: 'OR', multi: true },     // Multi-select OR
        features: { mode: 'OR', multi: true }   // Multi-select OR
    },
    debug: true,
    counter: {
        template: 'Showing {visible} of {total} items',
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
    },
    animation: {
        type: 'fade',
        duration: 300
    }
});

Note: Checkboxes support multi-select by nature. Use extended format with multi: true for proper behavior.

Filter Configuration

Mode:

All items

Range Filtering:
Use sliders and inputs to filter items by numeric ranges (price, rating, sales).
Range filters work independently and can be combined with category filters.

Range Filter Controls

Price Range

Rating Range

Sales Range

Date Range

Combine with Category Filters

▶ 📝 Configuration Example

// Initialize Range AFS with RangeFilter support
const rangeAfs = new AFS({
    containerSelector: '#content-range',
    itemSelector: '.filter-item',
    filterButtonSelector: '.range-btn-filter',
    searchInputSelector: '.range-filter-search',
    counterSelector: '.range-filter-counter',
    searchKeys: ['title', 'categories'],
    debug: true,
    counter: {
        template: 'Showing {visible} of {total} items',
        filteredTemplate: '({filtered} filtered)',
        noResultsTemplate: 'No items found',
    },
    animation: { type: 'fade', duration: 300 }
});

// Add range slider for price filtering
const priceContainer = document.querySelector('.price-range-container');
rangeAfs.rangeFilter.addRangeSlider({
    key: 'price',
    type: 'number',
    container: priceContainer,
    min: 12,
    max: 2500,
    step: 1,
    ui: { showHistogram: true, bins: 10 }
});

Note: Range filters provide continuous filtering with visual sliders and optional histograms.

Search Configuration

All items

Advanced Search:
Search across multiple fields simultaneously. You can search by title, category, brand, features, or any combination.
Try searches like: "apple premium", "fashion comfortable", "book classic", "food artisan"

Search & Sort Controls

Try These Search Examples:

Order Results: Sort or shuffle the search results (does not affect search filtering)

Search Statistics

Total Products

Visible

Hidden

Search Matches

▶ 📝 Configuration Example

// Initialize Search AFS (Search-focused configuration)
const searchAfs = new AFS({
    containerSelector: '#search-item-grid',
    itemSelector: '.filter-item',
    searchInputSelector: '.search-filter-search',
    counterSelector: '.search-filter-counter',
    searchKeys: ['title', 'categories', 'brand', 'features'],
    debounceTime: 300,  // Search delay in milliseconds
    debug: true,
    counter: {
        template: 'Found {visible} of {total} items',
        filteredTemplate: '({filtered} hidden)',
        noResultsTemplate: 'No items match your search',
    },
    animation: {
        type: 'fade',
        duration: 200
    }
});

Note: Search-focused configuration with multiple searchable fields and optimized debounce timing.