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 >

dt要素を選択するためにselectorオプションの設定の例：

 < 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"
• live-filter要素自体のselector属性を使用してフィルタリングされているアイテムを調整します
• live-filter要素自体のcase属性を使用して、検索のケース感度を調整します

インストール

いくつかのオプションがあります（これらのいずれかを選択してください）：

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 > 

クレジット

次の人々に感謝します：

• このWebコンポーネントのレポンテンプレートを刺激してくれたZach Leatherman