GenericElementFilter – Edge Case Demo

This page demonstrates multiple independent GenericElementFilter instances with lots of edge cases: cards, table rows, matchMode="contains", reset(), hooks, auto-inferred root and bindAll() + data-* configuration.

1. Cards (equals mode, explicit root, reset)

Includes cards with missing data-attributes and values not present in the selects.

Morel

Spring, edible.

Chanterelle

Summer, edible.

Amanita muscaria

Autumn, toxic.

Porcini

Autumn, edible.

Winter oyster

Season: winter (not in select), edible. Should only ever disappear when other filters exclude it.

Mystery spring fungus

Has data-season="spring" but no data-edible.

Unknown species

Has data-edible="no" but no data-season.

2. Cards with tags (matchMode = "contains")

Uses data-tag with multiple tokens and matchMode="contains".

Forest walk

Tags: forest, meadow

Meadow picnic

Tags: meadow (with extra whitespace)

Riverside trail

Tags: water, forest (comma separated)

Tagless card

Empty data-tag → should only be visible for "All tags".

3. Table rows (equals, allValue="")

Rows with data-country / data-size, rows missing attributes and values not present in the selects.

City Country Size
Berlin DE big
Weimar DE small
Graz AT small
Vienna AT big
Leipzig DE medium (not in size select)
Innsbruck AT (no data-size)

4. bindAll() + data-* configuration (multiple filters)

No explicit JS constructor, two filters configured via data attributes.

Foraging basket

Category: gear · Availability: in stock

Mushroom field guide

Category: book · Availability: in stock

Knife set

Category: gear · Availability: out of stock

Simple basket (no availability)

Category: gear · no data-availability.

5. Hooks + dynamic content

Uses onBeforeFilter, onAfterFilter and refreshElements() after adding cards.

Old oak forest

Habitat: forest

Flower meadow

Habitat: meadow

Foggy swamp

Habitat: swamp (not in select, should only be filtered by other criteria).

6. Minimal setup (no status/no-results elements)

Only required options: elementsSelector and filtersSelector.

Info box

Type: info

Warning box

Type: warning

Another info box

Type: info, no status and no explicit no-results element.