live filter

live-filter

Eine Webkomponente zum Filtern von Elementen mithilfe einer Texteingabe.

Demo | Weitere Lesen

Beispiele

Allgemeines Nutzungsbeispiel:

 < 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 >

Beispiel Festlegen der Option selector , um dt -Elemente auszuwählen:

 < 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 >

BEISPIEL Setzen Sie die case zum Ändern der Suche in den Fall unempfindlich:

 < 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 > 

Merkmale

Mit dieser Webkomponente können Sie:

• Filtern Sie eine Liste mit einem Texteingangsfeld
• Steuern Sie, wie die Filterung dargestellt wird, indem CSS verwendet wird, um Elementattribute data-live-filter-match="true" und data-live-filter-match="false" zu verwenden.
• Passen Sie an, welche Elemente mit dem selector im live-filter -Element selbst filtriert werden
• Passen Sie die Fallempfindlichkeit der Suche anhand des case im live-filter Element selbst an

Installation

Sie haben einige Optionen (wählen Sie eine davon):

1. Installieren Sie über NPM: npm install @daviddarnes/live-filter
2. Laden Sie die Quelle manuell von Github in Ihr Projekt herunter.
3. Überspringen Sie diesen Schritt und verwenden Sie das Skript direkt über eine Drittanbieter -CDN (nicht für die Produktionsanwendung empfohlen)

Verwendung

Stellen Sie sicher, dass Sie das <script> in Ihr Projekt aufnehmen (wählen Sie eines davon):

 <!-- 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 >

Verwenden von selector und case

Standardmäßig wählt live-filter alle darin gesuchten li Elemente aus. Mit dem selector können Sie jedoch eine andere Selektorzeichenfolge übergeben, um sie durchzuführen:

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

Standardmäßig ist live-filter für Fall sensibel, was bei der Suche durch richtige Substantive und Titel restriktiv sein kann. Dies kann unter Verwendung des case angepasst werden und den Wert auf insensitive Einstellung festlegen:

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

Kredit

Dank an die folgenden Leute:

• Zach Leatherman für die Inspiration dieser Webkomponenten -Repo -Vorlage