live filter

live-filter

텍스트 입력을 사용하여 항목을 필터링하기위한 웹 구성 요소.

데모 | 추가 독서

예

일반 사용 예 :

 < 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의 무감각 상태로 변경하려는 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 > 

특징

이 웹 구성 요소는 다음을 수행 할 수 있습니다.

• 텍스트 입력 필드를 사용하여 목록을 필터링하십시오
• 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. 이 단계를 건너 뛰고 제 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에 민감하며, 이는 적절한 명사 및 타이틀을 검색 할 때 제한적 일 수 있습니다. 이것은 case 속성을 사용하여 조정하고 값을 insensitive 하게 설정할 수 있습니다.

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

신용 거래

다음 사람들에게 감사합니다.

• 이 웹 구성 요소 Repo 템플릿에 영감을 주신 Zach Leatherman