live filter

live-filter

Um componente da Web para filtrar itens usando uma entrada de texto.

Demo | Leitura adicional

Exemplos

Exemplo de uso geral:

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

Exemplo Configurando a opção selector para selecionar elementos 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 >

Exemplo Configurando a opção case para alterar a pesquisa para ser insensível ao caso:

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

Características

Este componente da web permite:

• Filtre uma lista usando um campo de entrada de texto
• Controle como a filtragem é apresentada usando CSS para conectar-se aos atributos de elemento data-live-filter-match="true" e data-live-filter-match="false"
• Ajuste quais itens são filtrados usando o atributo selector no próprio elemento live-filter
• Ajuste a sensibilidade da caixa da pesquisa usando o atributo case no próprio elemento live-filter

Instalação

Você tem algumas opções (escolha uma delas):

1. Instale via NPM: npm install @daviddarnes/live-filter
2. Faça o download da fonte manualmente do GitHub em seu projeto.
3. Pule esta etapa e use o script diretamente por meio de um CDN de terceiros (não recomendado para uso da produção)

Uso

Certifique -se de incluir o <script> em seu projeto (escolha um deles):

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

Usando selector e case

Por padrão, live-filter selecionará todos os elementos li dentro dele para pesquisar. No entanto, com o atributo selector , você pode passar em uma seleção diferente para pesquisar:

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

Por padrão, live-filter será sensível ao minúsculo, o que pode ser restritivo ao pesquisar em substantivos e títulos adequados. Isso pode ser ajustado usando o atributo case e definindo o valor como insensitive :

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

Crédito

Com agradecimento às seguintes pessoas:

• Zach Leatherman para inspirar este modelo de repo componente da web