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组件回购模板