Seach data using onkeyup event jquery

Sedikit mau bagi-bagi tips nih buat agan-aganwati yang hobby coding dan bereksperimen… heuheu
Jadi di website maupun mobile apps kan biasanya ada search box dari list yang ada, bisa kita filter, ini beda sama suggestion ya 🙂 Ini konsepnya cuma get value dari search box dan dicocokin sama list yg kita punya, kalo ga cocok ya di hide. Simple aja 🙂

Misal kita punya html seperti ini :

 

<input type="text" id="search">
<p class="red">Angin</p>
<p class="red">Feni</p>
<p class="red">Dendi</p>
<p class="red">Mutia</p>
<p class="red">Alvita</p>
<p class="red">Fian</p>

Nah, untuk filternya saya pake jquery, langsung disimak aja 😀

Event yang saya gunakan adalah onkeyup dimana function pada onkeyup akan dilakukan secara otomatis saat user melepaskan tombol pada keyboard, jadi selama kita masih menekan tombol pada keyboard aksi tidak akan dijalankan. Konsepnya, kita menyeleksi semua elemen yang memiliki class red, kemudian dari elemen tersebut akan dicocokkan dengan keyword search dengan function indexOf, jika tidak cocok maka elemen tersebut akan di sembunyikan.

     $('#search').on('keyup', function(){
         var key = $(this).val().toLowerCase(); //ambil nilai dari inputtext search, dijadikan huruf kecil semua
         var elements = $('.red');   // select semua elemen yang memiliki class "red"
         for (var i=0; i<elements.length; i++){
			var elem = $(elements[i]);
			var nama = elem.text().toLowerCase(); //text dari selected element ke -i 
			if((key !== '') && (nama.indexOf(key) < 0)) 
//cek jika key kosong, dan ada kesamaan dengan text nama menggunakan function indexOf dimana jika tidak terdapat karakter yang sama dengan key, maka return nya adadalah -1, means, jika < 0 maka tidak ditemukan kesamaan
				{
				    elem.hide(); //hide element
				} 
             else 
                 {  //karakter yang dicari ditemukan,
                     elem.show(); //show element
                 }
		}
         
     });

Sekian, dan semoga membantu ^_^
Untuk demonya bisa dilihat disini ^_^

Advertisements

2 thoughts on “Seach data using onkeyup event jquery

    • hi Andi, thx for visiting my blog.
      Untuk ambil value dari database, km bisa pake query spt biasa, km load dulu semua datanya.
      Br kemudian filter ini km pasang pada event on keyup di element filter kamu. 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s