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 >

Пример настройки параметра selector для выбора dt Elements:

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

Функции

Этот веб -компонент позволяет вам:

• Отфильтруйте список, используя поле текстового ввода
• Управляйте тем, как фильтрация представлена ​​с использованием CSS для подключения к атрибутам элемента, data-live-filter-match="true" и data-live-filter-match="false"
• Отрегулируйте, какие элементы фильтруются с помощью атрибута selector на самом элементе live-filter
• Отрегулируйте чувствительность к случаю поиска с использованием атрибута 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 для вдохновения этого шаблона Repo веб -компонента