holmes
v1.17.2
ค้นหาภายในเพจได้อย่างรวดเร็วและง่ายดาย
โฮล์มส์กรองรายการองค์ประกอบตามค่าของ input ที่มีขนาดเพียง ~2KB
คุณสามารถติดตั้ง Holmes ด้วย npm หรือ bower ภายใต้ชื่อแพ็คเกจ holmes.js สำหรับ npm ที่มีลักษณะเช่นนี้:
$ yarn add holmes.js # or via npmหลังจากนั้นคุณสามารถเพิ่มลงในเพจของคุณด้วย เช่น webpack, rollup, browserify หรือโหลดโมดูลในแท็กสคริปต์อื่น
คุณต้องตรวจสอบให้แน่ใจว่าคุณมีกฎ css สำหรับคลาส .hidden ซึ่งจะซ่อนองค์ประกอบตามที่คุณต้องการ ทางเลือกหนึ่งคือการมีสิ่งนี้:
. hidden {
display : none;
} แต่นี่อาจเป็น css ที่คุณต้องการ
การสาธิต
คุณควรใช้โฮล์มส์เมื่อ
ในกรณีที่คุณมีความคาดหวังที่ซับซ้อนกว่านี้ ฉันขอแนะนำให้ใช้บริการเช่น Algolia
การเปิดเผยอย่างยุติธรรม: ปัจจุบันฉันทำงานที่ Algolia น่าสนใจไหม เข้าร่วมกับเรา!
holmes ( {
input : '.search input' , // default: input[type=search]
find : '.results div' // querySelectorAll that matches each of the results individually
} ) เอกสารครบถ้วน
input ค่าเริ่มต้น : input[type=search]
querySelector สำหรับอินพุต
ตัวอย่าง : input , .search input
find ที่จำเป็นquerySelectorAll สำหรับองค์ประกอบที่จะค้นหา
ตัวอย่าง : blockquote p , .result , .results div
classclass.hidden ค่าเริ่มต้น : hidden
คลาสที่จะเพิ่มเมื่อ .find find ไม่มีคำค้นหา
ตัวอย่าง : hidden , dn , none
class.visible ค่าเริ่มต้น : false
คลาสที่จะเพิ่มให้กับรายการที่มองเห็นได้หากมีคำค้นหา
ตัวอย่าง : visible , vis , nohidden
placeholder ค่าเริ่มต้น : false
html เพื่อแสดงเมื่อไม่มีผลลัพธ์
ตัวอย่าง : <p> No results </p> Didn't find anything.
dynamic ค่าเริ่มต้น : false
เปิดใช้งานตัวเลือกนี้หากคุณต้องการให้โฮล์มส์สืบค้นค่าของ .find find ในทุกอินพุต
ตัวอย่าง : true false
instant ค่าเริ่มต้น : false
ตัวเลือกนี้เลิกใช้แล้ว หากต้องการใช้ Holmes ในสภาพแวดล้อมแบบอะซิงก์ ให้เริ่มต้นด้วย:
holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ; วิธีนี้จะเริ่มทันที เช่นเดียวกับที่เคยทำกับ instant: true ขออภัยในความไม่สะดวก
ตามค่าเริ่มต้น Holmes จะรอเหตุการณ์ DOMContentLoaded เพื่อเริ่มการค้นหา หากคุณกำลังโหลดองค์ประกอบโดย AJAX เช่น เหตุการณ์นี้เกิดขึ้นเร็วเกินไป ในกรณีดังกล่าว คุณสามารถเปิดใช้งาน instant และเริ่ม Holmes เมื่อเนื้อหาของคุณพร้อม
ตัวอย่าง : true false
minCharacters ค่าเริ่มต้น : 0
ต้องพิมพ์จำนวนอักขระขั้นต่ำก่อนที่โฮล์มส์จะเริ่มกรอง
ตัวอย่าง : 2 , 5
mark ค่าเริ่มต้น : false
หากต้องการเริ่มแสดงผลลัพธ์ในแท็ก <mark> ภายใน .find find คุณควรเปิดใช้งานสิ่งนี้ หากต้องการเปลี่ยนสี match กับที่แสดงในคุณควรกำหนดรูปแบบสีพื้นหลัง mark
❗ สิ่งนี้จะทำลายผู้ฟังเหตุการณ์ในเนื้อหาที่ซ้อนกัน
❗ สิ่งนี้จะไม่ทำงานหากตัวละครหลังแมตช์เป็นตัวอักษร
>.
หากคุณจำเป็นต้องใช้อักขระนี้จริงๆ คุณสามารถแทนที่รายการทั้งหมดของ
>ด้วย>
ตัวอย่าง : true false
hiddenAttr ค่าเริ่มต้น : true
เพิ่ม hidden="true" ให้กับองค์ประกอบที่ซ่อนอยู่ ลิงค์ที่น่าสนใจที่อธิบายการใช้งาน
shouldShowการตัดสินการจับคู่เริ่มต้นคือการจับคู่บางส่วนของค่าอินพุต
function ( htmlText , search ) {
return htmlText . indexOf ( search ) !== - 1 ;
}ฟังก์ชันจับคู่แบบกำหนดเองที่จะเรียกใช้โดยมีอาร์กิวเมนต์แรกสำหรับข้อความขององค์ประกอบ และเป็นอาร์กิวเมนต์ที่สองสำหรับข้อความที่ป้อนปัจจุบัน สิ่งนี้ควรคืนค่าเป็นจริงหากคุณต้องการให้องค์ประกอบแสดง และคืนค่าเป็นเท็จหากจำเป็นต้องซ่อน
var customMatching = function ( htmlText , search ) {
return search . split ( / s+ / ) . every ( function ( v , i ) {
if ( htmlText . indexOf ( v ) === - 1 ) {
return false ;
}
return true ;
} ) ;
}
holmes ( {
shouldShow : customMatching
} )onHiddenโทรกลับเมื่อมีการซ่อนรายการ
function ( el ) {
console . log ( 'hide' , el ) ;
}onVisibleโทรกลับเมื่อรายการปรากฏขึ้นอีกครั้ง
function ( el ) {
console . log ( 'show' , el ) ;
}onEmptyโทรกลับเมื่อไม่พบรายการ
function ( placeholder ) {
console . log ( 'nothing found' , placeholder ) ;
}onFoundโทรกลับเมื่อพบรายการหลังจากว่างเปล่า
function ( placeholder ) {
console . log ( 'something found' , placeholder ) ;
}onInputโทรกลับสำหรับทุกอินพุต
function ( input ) {
console . log ( 'current input' , input ) ;
} สำหรับวิธีการทั้งหมด คุณควรเริ่มต้นอินสแตนซ์ใหม่ของ Holmes ดังนี้:
var h = new holmes ( options ) ;จากนั้นคุณสามารถใช้วิธีการต่อไปนี้:
.clear()คุณสามารถล้างอินพุตโฮล์มส์โดยทางโปรแกรมได้โดยใช้:
h . clear ( ) ;.count()คุณสามารถรับข้อมูลเกี่ยวกับองค์ประกอบที่มองเห็น ซ่อน และรวมได้ทุกเมื่อ:
h . count ( ) ; // {all: 41, hidden: 34, visible: 7}.start() เริ่มต้นการฟังแบบคู่สำหรับตัวเลือกที่ระบุ โฮล์มส์มักจะให้ .start() ทำงานบนการเริ่มต้น เสมอ
h . start ( ) ;.stop()หยุด Listener เหตุการณ์ที่กำลังรันอยู่ในปัจจุบัน แก้ไขสัญญาเมื่อดำเนินการเสร็จสิ้น
h . stop ( ) ;
h . start ( ) ; // could accidentally start too soon
h . stop ( ) . then ( h . start ) ; // might take a small time.hidden นอกจากนี้ยังมีสมาชิก .hidden ที่ให้การนับโดยไม่ต้องเรียกใช้ฟังก์ชัน:
console . log ( h . hidden ) ; // 34.elements NodeList ขององค์ประกอบทั้งหมดที่โฮล์มส์พิจารณา นอกจากนี้ยังมี .elementsLength สำหรับจำนวนองค์ประกอบและ .elementsArray พร้อมอาร์เรย์ขององค์ประกอบ
.input อินพุตที่โฮล์มส์ดู นอกจากนี้ยังมีสตริงการค้นหาสุดท้ายเป็น .searchString
.placeholderตัวยึดตำแหน่งปัจจุบัน (โหนด DOM)
.runningไม่ว่าอินสแตนซ์นี้กำลังทำงานอยู่หรือไม่
.optionsแสดงตัวเลือกที่เลือกไว้สำหรับกรณีโฮล์มส์นี้ คุณยังสามารถตั้งค่าตัวเลือกเช่นนี้ได้หลังจากการกำหนดค่าเริ่มต้น
console . log ( h . options ) ; // specified optionsหมายเหตุ: ตัวเลือกการตั้งค่าหลังจากที่มันทำงานอาจต้องใช้
h.stop().then(h.start)
| อะไร | WHO | ภาพ |
|---|---|---|
| bullg.it | @haroenv | |
| family.scss | @lukyvj | |
| wikeo.be | @บิสตอรี่ | |
| อาหารกลางวันbreakapp.be | @AndreasBackx |
ฉันอยากรู้ว่าผู้คนใช้โปรเจ็กต์ของฉันอย่างไร โปรดบอกฉันหากคุณต้องการเป็นจุดเด่น!
เข้ากันได้กับ IE11 สำหรับการรองรับเบราว์เซอร์รุ่นเก่า คุณจะต้อง polyfill classList , addEventListener และเหตุการณ์ input ด้วยตัวอย่าง remy/polyfills ฉันยังไม่ได้ลองด้วยตัวเองเลย ดังนั้นโปรดแจ้งให้เราทราบว่าคุณใช้อะไรหากคุณรองรับเบราว์เซอร์รุ่นเก่า!
สำหรับ IE11 คุณต้อง polyfill Object.assign และ String.includes คุณสามารถทำได้ตามที่อธิบายไว้ใน #90
แจ้งให้เราทราบทาง Twitter: @haroenv หรือในปัญหา
ยินดีต้อนรับเสมอ! ต่อไปนี้เป็นหลักเกณฑ์ที่หลวมๆ:
feature branchesnpm run doc เพื่อสร้างเอกสารประกอบใหม่ การสร้าง UMD นั้นทำได้ผ่านการยกเลิก ( npm run build )
แต่ฉันไม่กัด หากคุณมีคำถามหรือความไม่มั่นใจ โทรหาฉันใน gitter เป็นตัวอย่าง
อาปาเช่ 2.0
