holmes
v1.17.2
البحث السريع والسهل داخل الصفحة.
يقوم هولمز بتصفية قائمة العناصر بناءً على قيمة input التي تبلغ حوالي 2 كيلو بايت فقط.
يمكنك تثبيت Holmes باستخدام npm أو bower تحت اسم الحزمة holmes.js . بالنسبة إلى npm الذي يبدو كالتالي:
$ yarn add holmes.js # or via npmوبعد ذلك يمكنك إضافتها إلى صفحتك باستخدام حزمة الويب، أو التجميع، أو المتصفح، أو تحميل الوحدة النمطية في علامة برنامج نصي مختلفة.
عليك التأكد من أن لديك قاعدة 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]
محدد الاستعلام للإدخال
أمثلة : input ، .search input
find المطلوبةquerySelectorAll للعناصر المراد البحث فيها
أمثلة : blockquote p ، .result ، .results div
classclass.hidden الافتراضي : hidden
الفئة المراد إضافتها عندما لا يحتوي ملف .find على استعلام البحث.
أمثلة : hidden ، dn ، none
class.visible الافتراضي : false
فئة لإضافتها إلى العناصر المرئية إذا كانت تحتوي على استعلام البحث.
أمثلة : visible , vis , nohidden
placeholder الافتراضي : false
html لإظهار عندما لا توجد نتائج.
أمثلة : <p> No results </p> ، Didn't find anything.
dynamic الافتراضي : false
قم بتمكين هذا الخيار إذا كنت تريد أن يقوم هولمز بالاستعلام عن قيمة .find عند كل إدخال.
أمثلة : true ، false
instant الافتراضي : false
تم إهمال هذا الخيار. لاستخدام Holmes في بيئة غير متزامنة، قم بتهيئتها باستخدام:
holmes ( options ) . start ( ) ;
// or
const h = new holmes ( options ) ;
h . start ( ) ; بهذه الطريقة سيبدأ الأمر على الفور، تمامًا كما كان الحال مع instant: true . نأسف للإزعاج.
افتراضيًا، سينتظر هولمز حدث DOMContentLoaded لبدء البحث. إذا كنت تقوم بتحميل العناصر بواسطة AJAX على سبيل المثال، فإن هذا الحدث يأتي مبكرًا جدًا. في هذه الحالة، يمكنك تمكين ميزة instant وبدء تشغيل Holmes عندما يصبح المحتوى الخاص بك جاهزًا.
أمثلة : true ، false
minCharacters الافتراضي : 0
يجب كتابة الحد الأدنى من الأحرف قبل أن يبدأ هولمز في التصفية.
أمثلة : 2 ، 5
mark الافتراضي : false
لبدء عرض النتيجة في علامة <mark> داخل .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 ) ;
} بالنسبة لجميع الطرق، يجب عليك تهيئة مثيل جديد لهولمز مثل هذا:
var h = new holmes ( options ) ;وبعد ذلك يمكنك استخدام الطرق التالية:
.clear()يمكنك مسح مدخلات هولمز برمجياً، باستخدام:
h . clear ( ) ;.count()يمكنك الحصول على معلومات حول العناصر المرئية والمخفية والإجمالية في أي وقت:
h . count ( ) ; // {all: 41, hidden: 34, visible: 7}.start() ابدأ مستمعًا متساويًا للخيارات المحددة. يقوم هولمز دائمًا بتشغيل .start() عند التهيئة.
h . start ( ) ;.stop()إيقاف مستمع الحدث قيد التشغيل الحالي. يحل الوعد عند اكتمال ذلك.
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)
| ماذا | من | صورة |
|---|---|---|
| Bullg.it | @haroenv | |
| Family.scss | @lukyvj | |
| wikeo.be | @bistory | |
| lunchbreakapp.be | @أندرياسباككس |
أرغب في معرفة كيفية استخدام الأشخاص لمشروعي، أخبرني إذا كنت تريد أن يتم تمييزك!
متوافق حتى IE11. لدعم المتصفحات القديمة، ستحتاج إلى polyfill classList و addEventListener وحدث input باستخدام remy/polyfills على سبيل المثال. لم أجرب هذا بنفسي بعد، لذا اسمحوا لي أن أعرف ما الذي استخدمته إذا كنت تدعم المتصفحات القديمة!
بالنسبة إلى IE11، تحتاج إلى ملء Object.assign و String.includes ، ويمكنك القيام بذلك كما هو موضح في رقم 90
اسمحوا لي أن أعرف على تويتر:haroenv، أو في قضية.
المساهمات هي دائما موضع ترحيب! فيما يلي بعض الإرشادات الفضفاضة:
feature branchesnpm run doc لإعادة إنشاء الوثائق يتم البناء على UMD عبر مجموعة التحديثات ( npm run build ).
لكنني لا أعض، إذا كان لديك أي أسئلة أو مخاوف، فاتصل بي على سبيل المثال على التهيج.
أباتشي 2.0
