jQuery - Filter


Filter jQuery

Gunakan jQuery untuk memfilter/mencari elemen tertentu.


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 Email
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 DOM 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 Apa Saja

Lakukan pencarian peka huruf besar/kecil untuk teks di dalam elemen div:

Contoh


I am a paragraph.

I am a div element inside div.

Another paragraph.