jQuery filtrlar
jQuery filtrlar
Muayyan elementlarni filtrlash/qidirish uchun jQuery’dan foydalaning.
Jadvallarni filtrlash
Jadval yozuvlari bo‘yicha katta-kichik harflarni farqlamaydigan qidiruvni amalga oshiring:
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 izohi: jQuery yordamida jadvalning har bir qatorini sikl orqali ko‘rib chiqib, input maydonining qiymatiga mos keladigan matnli qiymatlar bor-yo‘qligini tekshiramiz. toggle() metodi qidiruvga mos kelmaydigan qatorni (display:none) yashiradi. Matnni kichik harflarga o‘tkazish uchun toLowerCase() DOM metodidan foydalanamiz, bu esa qidiruvni katta-kichik harflarga befarq qiladi (qidiruvda "john", "John" va hatto "JOHN" ham topiladi).
Ro‘yxatlarni filtrlash
Ro‘yxat elementlari bo‘yicha katta-kichik harflarni farqlamaydigan qidiruvni amalga oshiring:
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 matn bo‘yicha katta-kichik harflarni farqlamaydigan qidiruvni amalga oshiring:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!