Filter Bootstrap (Lanjutan)
Filter Bootstrap
Bootstrap tidak memiliki komponen yang memungkinkan pemfilteran. Namun, kita dapat menggunakan jQuery untuk memfilter/mencari elemen.
Filter Tabel
Lakukan pencarian peka huruf besar/kecil untuk item dalam tabel:
Contoh
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>
Contoh menjelaskan: Kami menggunakan jQuery untuk mengulang setiap baris tabel untuk memeriksa apakah ada nilai teks yang cocok dengan nilai bidang input. Metode toggle()menyembunyikan baris ( display:none) yang tidak cocok dengan pencarian. Kami menggunakan toLowerCase()metode untuk mengonversi teks menjadi huruf kecil, yang membuat kasus pencarian tidak sensitif (memungkinkan "john", "John", dan bahkan "JOHN" pada pencarian).
Daftar Filter
Lakukan pencarian peka huruf besar/kecil untuk item dalam daftar:
Contoh
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filter Dropdown
Lakukan pencarian peka huruf besar/kecil untuk item di menu tarik-turun:
Contoh
Open the dropdown menu and type something in the input field to search for dropdown items:
Filter Apa Saja
Lakukan pencarian case-insensitive untuk teks di dalam elemen div:
Contoh
I am a paragraph.
Another paragraph.