BS filtrlar
Bootstrap filtrlari
Bootstrap’da filtrlash imkonini beruvchi komponent yo‘q. Biroq elementlarni filtrlash / qidirish uchun jQuery’dan foydalanishimiz mumkin.
Jadvallarni filtrlash
Jadvaldagi elementlarni harflar registrini hisobga olmagan holda qidiring:
Misol
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
jQuery
<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>
O‘zingiz sinab ko‘ring »
Misol tahlili: Biz jQuery yordamida jadvalning har bir qatorini aylanib chiqib (loop), kiritish maydoni qiymatiga mos keladigan matn bor-yo‘qligini tekshiramiz. toggle() metodi qidiruvga mos kelmaydigan qatorni (display:none) yashiradi. Matnni kichik harflarga o‘tkazish uchun toLowerCase() metodidan foydalanamiz — bu qidiruvni harflar registriga bog‘liq bo‘lmagan holga keltiradi (qidiruvda "john", "John" va hatto "JOHN" ham topiladi).
Ro‘yxatlarni filtrlash
Ro‘yxatdagi elementlarni harflar registrini hisobga olmagan holda qidiring:
Misol
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Ochiluvchi menyularni filtrlash
Ochiluvchi menyudagi elementlarni harflar registrini hisobga olmagan holda qidiring:
Misol
Open the dropdown menu and type something in the input field to search for dropdown items:
Istalgan narsani filtrlash
div elementi ichidagi matnni harflar registrini hisobga olmagan holda qidiring:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!