Bootstrap 4 Filtreleri (Gelişmiş)
Önyükleme 4 Filtreleri
Bootstrap, filtrelemeye izin veren bir bileşene sahip değildir. Ancak, öğeleri filtrelemek/aramak için jQuery kullanabiliriz.
Tabloları Filtrele
Tablodaki öğeler için büyük/küçük harfe duyarsız arama yapın:
Örnek
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] |
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>
Açıklanan örnek: Giriş alanının değeriyle eşleşen herhangi bir metin değeri olup olmadığını kontrol etmek için her tablo satırında döngü yapmak için jQuery kullanıyoruz. Yöntem , aramayla eşleşmeyen toggle
satırı ( ) gizler . Metni küçük harfe dönüştürmek için yöntemi display:none
kullanırız , bu da aramanın büyük/küçük harfe duyarlı olmamasını sağlar (aramada "john", "John" ve hatta "JOHN" kullanımına izin verir).toLowerCase()
Listeleri Filtrele
Listedeki öğeler için büyük/küçük harfe duyarlı olmayan bir arama yapın:
Örnek
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Her Şeyi Filtrele
Bir div öğesi içindeki metin için büyük/küçük harfe duyarsız bir arama yapın:
Örnek
I am a paragraph.
Another paragraph.