live filter

live-filter

Komponen web untuk memfilter item menggunakan input teks.

Demo | Bacaan lebih lanjut

Contoh

Contoh Penggunaan Umum:

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

Contoh Pengaturan Opsi selector untuk Memilih Elemen 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 >

Contoh Pengaturan Opsi case Untuk Mengubah Pencarian Menjadi Kasus Tidak Sensitif:

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

Fitur

Komponen web ini memungkinkan Anda untuk:

• Saring daftar menggunakan bidang input teks
• Kontrol bagaimana pemfilteran disajikan dengan menggunakan CSS untuk menghubungkan ke dalam elemen atribut data-live-filter-match="true" dan data-live-filter-match="false"
• Sesuaikan item apa yang disaring menggunakan atribut selector pada elemen live-filter itu sendiri
• Sesuaikan sensitivitas kasus pencarian menggunakan atribut case pada elemen live-filter itu sendiri

Instalasi

Anda memiliki beberapa opsi (pilih salah satunya):

1. Instal melalui NPM: npm install @daviddarnes/live-filter
2. Unduh sumbernya secara manual dari GitHub ke dalam proyek Anda.
3. Lewati langkah ini dan gunakan skrip secara langsung melalui CDN pihak ke -3 (tidak disarankan untuk penggunaan produksi)

Penggunaan

Pastikan Anda memasukkan <script> dalam proyek Anda (pilih salah satunya):

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

Menggunakan selector dan case

Secara default, live-filter akan memilih semua elemen li di dalamnya untuk mencari. Namun dengan atribut selector Anda dapat meneruskan string pemilih yang berbeda untuk mencari:

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

Secara default, live-filter akan sensitif terhadap kasus, yang dapat membatasi saat mencari melalui kata benda dan judul yang tepat. Ini dapat disesuaikan dengan menggunakan atribut case dan mengatur nilai menjadi insensitive :

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

Kredit

Dengan terima kasih kepada orang -orang berikut:

• Zach Leatherman karena menginspirasi Template Repo Komponen Web ini