ดาวน์โหลด jquery searchable - ดาวน์โหลดซอร์สโค้ด jquery searchable

jquery searchable

ซอร์สโค้ดอื่น ๆ

vents

ดาวน์โหลด

ปลั๊กอินค้นหา jQuery

เวอร์ชันล่าสุด: v1.1.0 (ดูบันทึกการเปลี่ยนแปลง)

ปลั๊กอิน jQuery ขนาดเล็กและรวดเร็วเพื่อค้นหาองค์ประกอบต่างๆ ขณะที่คุณพิมพ์ ปลั๊กอินนี้สร้างและดูแลโดย Stidges ( Twitter | Github )

คุณสมบัติ

น้ำหนักเบา ปลั๊กอินนี้ย่อขนาด ~ 1kB และ gzipped เท่านั้น!
เร็ว . ปลั๊กอินนี้ได้รับการปรับให้เหมาะสมเพื่อการค้นหาที่รวดเร็วและไม่ล่าช้าแม้ผ่านชุดองค์ประกอบขนาดใหญ่
การค้นหาหลายประเภท ปลั๊กอินนี้มีประเภทการค้นหาที่แตกต่างกันสามประเภทนอกกรอบ! การจับคู่แบบคลุมเครือ การจับคู่แบบเข้มงวด (คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่) และการจับคู่เริ่มต้น (ไม่คำนึงถึงตัวพิมพ์เล็กและใหญ่)
การสตริปแถวอัตโนมัติ เมื่อค้นหาในตาราง แถวจะถูกซ่อนเมื่อไม่ตรงกัน เมื่อใช้เฟรมเวิร์ก CSS เช่น Bootstrap สิ่งนี้จะทำให้การสตริปตารางของคุณยุ่งเหยิง ปลั๊กอินนี้ทำให้คุณสามารถกำหนด CSS ที่จะนำไปใช้กับแถวคี่และแถวคู่และอัปเดตในขณะที่ค้นหา
แสดง/ซ่อนแบบกำหนดเอง คุณสามารถกำหนดฟังก์ชันที่กำหนดเองเพื่อแสดงและซ่อนองค์ประกอบขณะค้นหาได้
ค้นหาอะไรก็ได้ ปลั๊กอินนี้ไม่ได้ถูกจำกัดให้ใช้บนตาราง คุณสามารถใช้ชุดองค์ประกอบใดๆ ที่มี 'แถว' โดยมี 'คอลัมน์' อยู่ข้างในได้

สาธิต

คลิกที่นี่เพื่อดูการสาธิตการทำงานของปลั๊กอินนี้ (โฮสต์บน Bootsnipp)

เริ่มต้นใช้งาน

การใช้งานขั้นพื้นฐาน

หลังจากดาวน์โหลดปลั๊กอินนี้ ให้รวมไว้ในไฟล์ HTML ของคุณหลังจากโหลด jQuery:

 < script src =" jquery.js " > </ script >
< script src =" jquery.searchable.js " > </ script >

หมายเหตุ : หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่าเช่น <IE9 คุณสามารถใช้ jquery.searchable-ie.js แทน jquery.searchable.js เวอร์ชันนี้มี polyfill สำหรับฟังก์ชัน Array.prototype.reduce และดังนั้นจึงมีขนาดใหญ่กว่าเล็กน้อย (สองสามร้อยไบต์)

หลังจากนั้นคุณสามารถเริ่มต้นปลั๊กอินบนองค์ประกอบที่ต้องการได้ ตัวอย่างนี้ใช้ตารางที่มีรหัสเป็น 'ตาราง' ตามค่าเริ่มต้น ปลั๊กอินจะใช้อินพุตที่มีรหัส 'ค้นหา' (อ่านเกี่ยวกับวิธีการเปลี่ยนแปลงในส่วนการกำหนดค่าด้านล่าง):

 $ ( '#table' ) . searchable ( ) ;

การกำหนดค่า

ปลั๊กอินนี้มีตัวเลือกการกำหนดค่าดังต่อไปนี้:

ตัวเลือก	ค่าเริ่มต้น	คำอธิบาย
ตัวเลือก	`'tbody tr'`	กำหนดตัวเลือก jQuery หลักภายในองค์ประกอบที่ปลั๊กอินจะเริ่มต้น การดำเนินการนี้จะเลือกองค์ประกอบคอนเทนเนอร์ที่จะแสดงหรือซ่อน เช่น `tr` s ภายในตาราง หรือ `div.your-special-class` ภายในองค์ประกอบที่ค้นหาได้
ตัวเลือกลูก	`'td'`	กำหนดตัวเลือกเด็กภายใน 'ตัวเลือก' ที่กำหนดไว้ข้างต้น นี่เป็นการเลือกองค์ประกอบที่ค้นหาได้ภายในองค์ประกอบ 'ตัวเลือก' เช่น `td` หรือ `.searchable`
ค้นหาฟิลด์	`'#search'`	องค์ประกอบอินพุตที่ใช้สำหรับตัวกรองอินพุตการค้นหา
ลาย	`false`	กำหนดว่าองค์ประกอบมีแถบและควรแถบใหม่เมื่อค้นหา ( `true` หรือ `false` )
คี่แถว	`{ }`	กำหนดวัตถุ CSS เพื่อนำไปใช้กับแถวคี่ (เมื่อ `striped` ถูกตั้งค่าเป็น `true` )
แม้กระทั่งแถว	`{ }`	กำหนดวัตถุ CSS เพื่อนำไปใช้กับแถวคู่ (เมื่อ `striped` ถูกตั้งค่าเป็น `true` )
ซ่อน	`function`	ช่วยให้คุณสามารถกำหนดฟังก์ชันการซ่อนแบบกำหนดเองได้ ฟังก์ชันนี้ยอมรับหนึ่งพารามิเตอร์ ซึ่งเป็นองค์ประกอบ (แถว) ที่ถูกซ่อนอยู่ ตามค่าเริ่มต้น จะใช้ `elem.hide()` เพื่อซ่อนแถว
แสดง	`function`	ให้คุณกำหนดฟังก์ชันการแสดงแบบกำหนดเองได้ ฟังก์ชันนี้ยอมรับพารามิเตอร์หนึ่งตัว ซึ่งเป็นองค์ประกอบ (แถว) ที่ถูกซ่อนอยู่ โดยค่าเริ่มต้นจะใช้ `elem.show()` เพื่อแสดงแถว
ประเภทการค้นหา	`'default'`	กำหนดตัวจับคู่ที่จะใช้เมื่อค้นหา ค่าที่อนุญาตคือ `'fuzzy'` , `'strict'` และ `'default'`
onSearchActive	`false`	ช่วยให้คุณกำหนดฟังก์ชันที่จะเรียกใช้เมื่อการค้นหาทำงานอยู่ ฟังก์ชันนี้จะถูกเรียกทุกครั้งที่ผู้ใช้พิมพ์ลงในช่องค้นหาและช่องค้นหาไม่ว่างเปล่า องค์ประกอบที่ค้นหาได้และคำค้นหาจะถูกส่งไปยังฟังก์ชัน
ในการค้นหาว่าง	`false`	ช่วยให้คุณกำหนดฟังก์ชันที่จะเรียกใช้เมื่ออินพุตการค้นหาว่างเปล่า ฟังก์ชันนี้จะถูกเรียกหนึ่งครั้งเมื่ออินพุตการค้นหาว่างเปล่าหรือถูกล้าง องค์ประกอบที่ค้นหาได้จะถูกส่งผ่านไปยังฟังก์ชัน
บนSearchFocus	`false`	ช่วยให้คุณกำหนดฟังก์ชันที่จะเรียกใช้เมื่ออินพุตการค้นหาถูกโฟกัส บริบทของฟังก์ชัน `this` จะเป็นองค์ประกอบอินพุตการค้นหา
บนSearchBlur	`false`	ช่วยให้คุณกำหนดฟังก์ชันที่จะเรียกใช้เมื่ออินพุตการค้นหาเบลอ บริบทของฟังก์ชัน `this` จะเป็นองค์ประกอบอินพุตการค้นหา
เคลียร์ออนโหลด	`false`	กำหนดว่าควรล้างอินพุตการค้นหาเมื่อโหลดหน้าเว็บ ( `true` หรือ `false` )

ตัวอย่างการใช้งาน

ตัวอย่างนี้ใช้การกำหนดค่าที่แสดงด้านบนเพื่อปรับแต่งปลั๊กอิน:

 $ ( '#element' ) . searchable ( {
    selector      : '.row' ,
    childSelector : '.column' ,
    searchField   : '#mySearchInput' ,
    striped       : true ,
    oddRow        : { 'background-color' : '#f5f5f5' } ,
    evenRow       : { 'background-color' : '#fff' } ,
    hide          : function ( elem ) {
        elem . fadeOut ( 50 ) ;
    } ,
    show          : function ( elem ) {
        elem . fadeIn ( 50 ) ;
    } ,
    searchType    : 'fuzzy' ,
    onSearchActive : function ( elem , term ) {
        elem . show ( ) ;
    } ,
    onSearchEmpty : function ( elem ) {
        elem . hide ( ) ;
    } ,
    onSearchFocus : function ( ) {
        $ ( '#feedback' ) . show ( ) . text ( 'Type to search.' ) ;
    } ,
    onSearchBlur : function ( ) {
        $ ( '#feedback' ) . hide ( ) ;
    } ,
    clearOnLoad : true
} ) ;

บันทึกการเปลี่ยนแปลง

เวอร์ชัน 1.0.0:

การเปิดตัวครั้งแรก

เวอร์ชัน 1.1.0:

เพิ่มเหตุการณ์บางอย่างที่ช่วยให้คุณสามารถเรียกใช้ฟังก์ชันที่กำหนดเองในระหว่างวงจรการค้นหา: onSearchActive, onSearchEmpty, onSearchFocus, onSearchBlur (ดูการกำหนดค่าสำหรับข้อมูลเพิ่มเติม)
เพิ่มการตั้ง clearOnLoad ซึ่งช่วยให้คุณสามารถล้างอินพุตการค้นหาในการโหลดหน้า / รีเฟรช

การมีส่วนร่วมและประเด็นต่างๆ

โปรดอย่าลังเลที่จะส่งปัญหาใด ๆ หรือดึงคำขอ เรายินดีเป็นอย่างยิ่ง เมื่อส่งปัญหา โปรดระบุหมายเลขเวอร์ชันและอธิบายปัญหาโดยละเอียดเพื่อที่จะสามารถแก้ไขได้โดยเร็วที่สุด!