(jQuery) Find and Filter Text Cepat pada DIV Element

Jika Anda memiliki website yang membutuhkan info spesifik, misalnya pengguna harus memilih asal negara atau apapun yang berhubungan dengan pemilihan kategori dengan cepat dan akurat, trik berikut sangat tepat Anda terapkan.

Contoh HTML
<input type="text" id="namaNegara"/>
<div class="media">Republik Indonesia</div>
<div class="media">Republik Islam Afghanistan</div>
<div class="media">Kerajaan Arab Saudi</div>
<div class="media">Republik Armenia</div>
<div class="media">Republik Azerbaijan</div>
<div class="media">Kerajaan Bahrain</div>
<div class="media">Republik Rakyat Bangladesh</div>
<div class="media">Kerajaan Bhutan</div>
<div class="media">Republik Filipina</div>
<div class="media">Georgia</div>
<div class="media">Republik India</div>

jQuery
<script type="text/javascript">
$('#namaNegara').keyup(function () {
    var namaNegara = this.value.toLowerCase();
    $('.media').each(function() {
        var filterNegara = $(this);
        var title = filterNegara.text().toLowerCase();
        if (title.indexOf(namaNegara) < 0) {
            filterNegara.hide();
        }
else {
filterNegara.show();
}
    });
});
</script>

Jika kode HTML Anda agak berbeda, misalnya terdapat tag khusus, seperti <span> atau <div>, maka kode perlu dirubah menjadi seperti ini:
<input type="text" id="namaNegara"/>
<div class="media">
<span>Republik Indonesia</span>
</div>
var title = filterNegara.find('span').text().toLowerCase();
Script tersebut disimpan diatas </body>
Silahkan dicoba..
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini