Live Filtering Menggunakan jQuery

Kali ini saya akan membahas bagaimana cara memanfaatkan jQuery untuk melakukan melakukan penyaringan teks secara langsung dari sekumpulan data berupa teks yang kita miliki. Teknik ini akan saya terapkan pada sebuah list yang berisi data-data yang kita miliki. Prinsipnya adalah memanfaatkan proses iterasi elemen menggunakan jQuery, kemudian mencocokan teks yang terdapat pada elemen tersebut dengan kata kunci yang dimasukkan. Jika kondisi tidak terpenuhi, dalam hal ini jika kata kunci tidak terdapat dalam keseluruhan teks pada masing-masing elemen tersebut, maka akan elemen tersebut akan disembunyikan dari daftar. Proses iterasi menggunakan jQuery dapat dilakukan dengan fungsi each(). Kemudian untuk setiap iterasi, kita akan menggunakan fungsi search(). Untuk menyembunyikan elemen yang tidak memenuhi kondisi, kita dapat menambahkan sebuah class yang memiliki atribut display dengan nilai none. Mari kita lihat contoh kode berikut.

#daftarku .hidden { display: none;}

Class hidden di atas akan kita tambahkan pada setiap elemen yang tidak memenuhi kondisi pencarian.

var filter = $(this).val();
var count = 0;
var pattern=new RegExp(filter, "i");
$("#daftarku li").each(function () {
if (!pattern.test($(this).text())) {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
}

Script di atas akan melakukan iterasi untuk setiap elemen li yang merupakan child dari elemen dengan id daftarku. Kemudian isi teks untuk setiap elemen li tersebut akan dicocokkan dengan kata kunci yang kita masukkan dengan menggunakan objek pattern yang merupakan instansiasi dari class RegExp. Objek pattern akan menggunakan keyword yang kita masukkan sebagai regular expression dimana parameter "i" menyatakan bahwa pencarian akan dilakukan dengan tanpa membedakan huruf besar dan huruf kecil (case-insensitive). Jika method test() menghasilkan nilai false, maka class hidden akan ditambahkan ke dalam elemen tersebut, sebaliknya, jika menhasilkan nilai true, maka class hidden akan dihilangkan dari elemen tersebut. Agar fungsi di atas dieksekusi secara real time, maka fungsi tersebut dapat kita masukkan ke dalam handler event keyup dari sebuah input bertipe text.

$("#filter-input").keyup(function () {
var filter = $(this).val();
var count = 0;
var pattern=new RegExp(filter, "i");
$("#daftarku li").each(function () {
if (!pattern.test($(this).text())) {
$(this).addClass("hidden");
} else {
$(this).removeClass("hidden");
count++;
}
});
$("#filter-count").text(count);
});

Fungsi di atas sama dengan contoh fungsi sebelumnya dengan ditambahkan variabel count untuk menyimpan jumlah hasil penyaringan. Berikut ini merupakan contoh skrip html yang akan memanfaatkan fungsi berikut.

<p>
Filter images: <input id="filter-input" size="40"/>
<span class="count"><span id="filter-count">0</span></span>
</p>
<div style="height: 200px; width: 500px; overflow:auto;">
<ul id="daftarku">
<li>Provinsi Nanggro Aceh Darussalam Ibukota nya adalah Banda Aceh</li>
<li>Provinsi Sumatera Utara Ibukota nya adalah Medan</li>
<li>Provinsi Sumatera Barat Ibukota nya adalah Padang</li>
<li>Provinsi Riau Ibukota nya adalah Pekan Baru</li>
<li>Provinsi Kepulauan Riau Ibukota nya adalah Tanjung Pinang</li>
<li>Provinsi Jambi Ibukota nya adalah Jambi</li>
<li>Provinsi Sumatera Selatan Ibukota nya adalah Palembang</li>
<li>Provinsi Bangka Belitung Ibukota nya adalah Pangkal Pinang</li>
<li>Provinsi Bengkulu Ibukota nya adalah Bengkulu</li>
<li>Provinsi Lampung Ibukota nya adalah Bandar Lampung</li>
<li>Provinsi DKI Jakarta Ibukota nya adalah Jakarta</li>
<li>Provinsi Jawa Barat Ibukota nya adalah Bandung</li>
<li>Provinsi Banten Ibukota nya adalah Serang</li>
<li>Provinsi Jawa Tengah Ibukota nya adalah Semarang</li>
<li>Provinsi Daerah Istimewa Yogyakarta Ibukota nya adalah Yogyakarta</li>
<li>Provinsi Jawa Timur Ibukota nya adalah Surabaya</li>
<li>Provinsi Bali Ibukota nya adalah Denpasar</li>
<li>Provinsi Nusa Tenggara Barat Ibukota nya adalah Mataram</li>
<li>Provinsi Nusa Tenggara Timur Ibukota nya adalah Kupang</li>
<li>Provinsi Kalimantan Barat Ibukota nya adalah Pontianak</li>
<li>Provinsi Kalimantan Tengah Ibukota nya adalah Palangkaraya</li>
<li>Provinsi Kalimantan Selatan Ibukota nya adalah Banjarmasin</li>
<li>Provinsi Kalimantan Timur Ibukota nya adalah Samarinda</li>
<li>Provinsi Sulawesi Utara Ibukota nya adalah Manado</li>
<li>Provinsi Gorontalo Ibukota nya adalah Gorontalo</li>
<li>Provinsi Sulawesi Tengah Ibukota nya adalah Palu</li>
<li>Provinsi Sulawesi Tenggara Ibukota nya adalah Kendari</li>
<li>Provinsi Sulawesi Selatan Ibukota nya adalah Makassar</li>
<li>Provinsi Maluku Ibukota nya adalah Ambon</li>
<li>Provinsi Maluku Utara Ibukota nya adalah Ternate</li>
<li>Provinsi Papua Barat Ibukota nya adalah Sorong</li>
<li>Provinsi Papua Tengah Ibukota nya adalah Timika</li>
<li>Provinsi Papua Timur Ibukota nya adalah Jayapura</li>
</ul>
</div>

Berikut contoh hasil yang akan dihasilkan:

Filter images: 0

• Provinsi Nanggro Aceh Darussalam Ibukota nya adalah Banda Aceh
• Provinsi Sumatera Utara Ibukota nya adalah Medan
• Provinsi Sumatera Barat Ibukota nya adalah Padang
• Provinsi Riau Ibukota nya adalah Pekan Baru
• Provinsi Kepulauan Riau Ibukota nya adalah Tanjung Pinang
• Provinsi Jambi Ibukota nya adalah Jambi
• Provinsi Sumatera Selatan Ibukota nya adalah Palembang
• Provinsi Bangka Belitung Ibukota nya adalah Pangkal Pinang
• Provinsi Bengkulu Ibukota nya adalah Bengkulu
• Provinsi Lampung Ibukota nya adalah Bandar Lampung
• Provinsi DKI Jakarta Ibukota nya adalah Jakarta
• Provinsi Jawa Barat Ibukota nya adalah Bandung
• Provinsi Banten Ibukota nya adalah Serang
• Provinsi Jawa Tengah Ibukota nya adalah Semarang
• Provinsi Daerah Istimewa Yogyakarta Ibukota nya adalah Yogyakarta
• Provinsi Jawa Timur Ibukota nya adalah Surabaya
• Provinsi Bali Ibukota nya adalah Denpasar
• Provinsi Nusa Tenggara Barat Ibukota nya adalah Mataram
• Provinsi Nusa Tenggara Timur Ibukota nya adalah Kupang
• Provinsi Kalimantan Barat Ibukota nya adalah Pontianak
• Provinsi Kalimantan Tengah Ibukota nya adalah Palangkaraya
• Provinsi Kalimantan Selatan Ibukota nya adalah Banjarmasin
• Provinsi Kalimantan Timur Ibukota nya adalah Samarinda
• Provinsi Sulawesi Utara Ibukota nya adalah Manado
• Provinsi Gorontalo Ibukota nya adalah Gorontalo
• Provinsi Sulawesi Tengah Ibukota nya adalah Palu
• Provinsi Sulawesi Tenggara Ibukota nya adalah Kendari
• Provinsi Sulawesi Selatan Ibukota nya adalah Makassar
• Provinsi Maluku Ibukota nya adalah Ambon
• Provinsi Maluku Utara Ibukota nya adalah Ternate
• Provinsi Papua Barat Ibukota nya adalah Sorong
• Provinsi Papua Tengah Ibukota nya adalah Timika
• Provinsi Papua Timur Ibukota nya adalah Jayapura

Sekian dari saya... Semoga dapat menambah wawasan kita semua.... Amin... Selamat mencoba... Contoh live: http://angggabastian.net84.net/examples/live-filtering-jquery/