live filter

live-filter

Un componente web para filtrar elementos utilizando una entrada de texto.

Demostración | Lectura adicional

Ejemplos

Ejemplo de uso general:

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

Ejemplo de configuración de la opción selector para seleccionar 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 >

Ejemplo de configuración de la opción case para cambiar la búsqueda para que sea insensible al 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 web le permite:

• Filtrar una lista utilizando un campo de entrada de texto
• Controle cómo se presenta el filtrado utilizando CSS para conectarse a los atributos de elementos data-live-filter-match="true" y data-live-filter-match="false"
• Ajuste qué elementos se filtran utilizando el atributo selector en el elemento live-filter en sí mismo
• Ajuste la sensibilidad del caso de la búsqueda utilizando el atributo case en el elemento live-filter en sí mismo

Instalación

Tiene algunas opciones (elija una de estas):

1. Instalar a través de NPM: npm install @daviddarnes/live-filter
2. Descargue la fuente manualmente de GitHub en su proyecto.
3. Omita este paso y use el script directamente a través de un CDN de terceros (no recomendado para el uso de producción)

Uso

Asegúrese de incluir el <script> en su proyecto (elija uno de estos):

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

Por defecto, live-filter seleccionará todos los elementos li dentro de él para buscar. Sin embargo, con el atributo selector puede pasar en una cadena selectora diferente para buscar:

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

Por defecto, live-filter será sensible a mayúsculas y minúsculas, lo que puede ser restrictivo al buscar sustantivos y títulos propios. Esto se puede ajustar utilizando el atributo case y establecer el valor en insensitive :

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

Crédito

Gracias a las siguientes personas:

• Zach Leatherman por inspirar esta plantilla de repositorio de componentes web