live filter

live-filter

用於使用文本輸入過濾項目的Web組件。

演示|進一步閱讀

例子

一般用法示例：

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

示例設置selector選項以選擇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 >

示例設置case選項以將搜索更改為不敏感的情況：

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

特徵

此Web組件允許您：

• 使用文本輸入字段過濾列表
• 控制如何通過使用CSS將濾網掛接到元素屬性data-live-filter-match="true"和data-live-filter-match="false" element屬性中的過濾方式。
• 使用live-filter元素上的selector屬性本身調整哪些項目被過濾的項目
• 調整使用case屬性本身上使用live-filter屬性搜索的情況敏感性

安裝

您有一些選擇（選擇其中之一）：

1. 通過NPM安裝： npm install @daviddarnes/live-filter
2. 從Github手動下載源到您的項目。
3. 跳過此步驟，直接通過第三方CDN使用腳本（不建議用於生產使用）

用法

確保在項目中包括<script> （選擇其中之一）：

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

使用selector和case

默認情況下， live-filter將選擇其中的所有li元素以進行搜索。但是，對於selector屬性，您可以傳遞其他選擇器字符串以搜索：

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

默認情況下live-filter將是敏感的，在搜索專有名詞和標題時，這可能是限制的。可以使用case屬性調整這一點，並將值設置為insensitive ：

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

信用

感謝以下人員：

• 扎克·萊瑟曼（Zach Leatherman）啟發此Web組件回購模板