BS4 filtrlar
Bootstrap 4 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, ularda kiritish maydonidagi qiymatga 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 esa qidiruvni harflar registriga bog‘liq bo‘lmagan holga keltiradi (qidiruvda "john", "John" va hatto "JOHN" ham mos keladi).
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
Istalgan narsani filtrlash
div elementi ichidagi matnni harflar registrini hisobga olmagan holda qidiring:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!