الصفحة الرئيسية>المتعلقة بالبرمجة>مكونات الطرف الثالث
تنزيل

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 : 

 < 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 لإلهام قالب ريبو مكون الويب هذا
يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل