Skip to main content

Multiple dropdown filters

Demo

Filter by type
Filter by colors

Ananas

Brun Jaune
Fruits

Avocat

Vert
Fruits

Banane

Jaune
Fruits

Brocoli

Vert
Légumes

Celeri

Vert
Légumes

Citron

Jaune
Fruits

Filet mignon

Gris
Viande

Lime

Vert
Fruits

Patate

Brun Jaune
Légumes

Pomme

Rouge
Fruits

Salade

Vert
Légumes

Steak

Rouge
Viande

Documentation

Importez la fonction dans votre projet

import { MultipleChoicesFilters } from "./functions/multiple-filters.js"

Instance et initialisation

Votre sélecteur est un <div> qui "wrap" vos multiples <form>. Idéalement, utilisez un ID. Inspectez l'exemple ci-dessus si vous avez des questions ou regardez la structure HTML dans le fichier de template.

const myFiltersDropdown = new MultipleChoicesFilters("#filter-wrapper-multiple", {
  divIds: ["listing"] // divs to replace with your content - array, multiple div possible
})

// init your newly created filter wrapper instance
myFiltersDropdown.init()
Note : Vous devez combiner les filtres avec l'élément dropdown pour avoir le look de ce démo. Vos forms se retrouveront dans des dropdowns.

Arguments - Options

  • Name
    Type
    Default
    Description
  • divIds
    Array - Liste de ID
    ["listing"]
    Array de <div> dont le contenu sera remplacé. Idéalement, utilisez des ids.

Code

Dossier de base

Dossier des filtres

Combinez avec ceci

Dropdown