live filter

live-filter

Un composant Web pour filtrer les éléments à l'aide d'une entrée de texte.

Démo | Dès la lecture

Exemples

Exemple d'utilisation générale:

 < script type =" module " src =" live-filter.js " > </ script >

< live-filter >
  < label > Filter: < input type =" search " aria-controls =" list " /> </ label >
  < ul role =" region " id =" list " aria-live =" polite " >
    < li > African Violet </ li >
    < li > Aloe Tiger Plant </ li >
    < li > Aralia Ming </ li >
    < li > Autograph Tree </ li >
  </ ul >
</ live-filter >

Exemple de définition de l'option selector pour sélectionner les éléments dt :

 < script type =" module " src =" live-filter.js " > </ script >

< live-filter selector =" dt " >
  < label > Filter: < input type =" search " aria-controls =" data " /> </ label >
  < dl role =" region " id =" data " aria-live =" polite " >
    < dt > Beast of Bodmin </ dt >
    < dd > A large feline inhabiting Bodmin Moor. </ dd >
    < dt > Morgawr </ dt >
    < dd > A sea serpent. </ dd >
    < dt > Owlman </ dt >
    < dd > A giant owl-like creature. </ dd >
  </ dl >
</ live-filter >

Exemple de définition de l'option case pour modifier la recherche pour être insensible au cas:

 < script type =" module " src =" live-filter.js " > </ script >

< live-filter case =" insensitive " >
  < label > Filter: < input type =" search " aria-controls =" list " /> </ label >
  < ul role =" region " id =" list " aria-live =" polite " >
    < li > African Violet </ li >
    < li > Aloe Tiger Plant </ li >
    < li > Aralia Ming </ li >
    < li > Autograph Tree </ li >
  </ ul >
</ live-filter > 

Caractéristiques

Ce composant Web vous permet de:

• Filtrez une liste à l'aide d'un champ de saisie de texte
• Contrôlez comment le filtrage est présenté en utilisant CSS pour s'accrocher aux attributs d'élément data-live-filter-match="true" et data-live-filter-match="false"
• Ajustez les éléments filtrés à l'aide de l'attribut selector sur l'élément live-filter lui-même
• Ajustez la sensibilité à la recherche de la recherche à l'aide de l'attribut case sur l'élément live-filter lui-même

Installation

Vous avez quelques options (choisissez-en une):

1. Installer via NPM: npm install @daviddarnes/live-filter
2. Téléchargez la source manuellement à partir de GitHub dans votre projet.
3. Ignorez cette étape et utilisez le script directement via un CDN tiers (non recommandé pour une utilisation en production)

Usage

Assurez-vous d'inclure le <script> dans votre projet (choisissez-en un):

 <!-- Host yourself -->
< script type =" module " src =" live-filter.js " > </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://www.unpkg.com/@daviddarnes/[email protected]/live-filter.js "
> </ script > 

 <!-- 3rd party CDN, not recommended for production use -->
< script
  type =" module "
  src =" https://esm.sh/@daviddarnes/[email protected] "
> </ script >

Utilisation selector et case

Par défaut, live-filter sélectionnera tous les éléments li à ce sujet pour rechercher. Cependant, avec l'attribut selector , vous pouvez passer dans une autre chaîne de sélecteur pour rechercher:

 < live-filter selector =" dt " >
  <!-- ... -->
</ live-filter >

Par défaut, live-filter sera sensible à la casse, ce qui peut être restrictif lors de la recherche dans les noms et titres appropriés. Cela peut être ajusté à l'aide de l'attribut case et de définition de la valeur à insensitive :

 < live-filter case =" insensitive " >
  <!-- ... -->
</ live-filter > 

Crédit

Merci aux personnes suivantes:

• Zach Leatherman pour avoir inspiré ce modèle de repo composant Web