مرشحات Bootstrap (متقدم)
مرشحات Bootstrap
لا يحتوي Bootstrap على مكون يسمح بالتصفية. ومع ذلك ، يمكننا استخدام jQuery لتصفية العناصر / البحث عنها.
جداول التصفية
قم بإجراء بحث حساس لحالة الأحرف عن العناصر الموجودة في جدول:
مثال
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
مسج
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var
value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
شرح المثال: نحن نستخدم jQuery للتكرار خلال كل صفوف جدول للتحقق مما إذا كانت هناك أي قيم نصية تتطابق مع قيمة حقل الإدخال. تخفي الطريقة toggle()الصف ( display:none) الذي لا يتطابق مع البحث. نستخدم toLowerCase()طريقة تحويل النص إلى أحرف صغيرة ، مما يجعل حالة البحث غير حساسة (يسمح باستخدام "john" و "John" وحتى "JOHN" في البحث).
قوائم التصفية
قم بإجراء بحث حساس لحالة الأحرف عن العناصر الموجودة في القائمة:
مثال
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
تصفية القوائم المنسدلة
قم بإجراء بحث حساس لحالة الأحرف عن العناصر في القائمة المنسدلة:
مثال
Open the dropdown menu and type something in the input field to search for dropdown items:
تصفية أي شيء
قم بإجراء بحث حساس لحالة الأحرف عن نص داخل عنصر div:
مثال
I am a paragraph.
Another paragraph.