หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

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 สำหรับสร้างแรงบันดาลใจให้กับเทมเพลต repo ส่วนประกอบของเว็บนี้
ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด