Pages

3/03/2017

Membuat Autocomplete Bersyarat dengan Jquery

Anda mungkin sudah sering menggunakan library Jquery. Namun Anda mungkin bertanya-tanya, bisakah menerapkan Autocomplete Jquery dengan syarat? Sebagai contoh, Anda punya beberapa mahasiswa dengan nama yang mirip. Tentu saja mereka akan memiliki NIM yang berbeda-beda. Jika autocomplete Anda tidak dibatasi, maka saat Anda mengetikkan nama "Agus" misalnya, semua nama yang mengandung "Agus" akan muncul. Pertanyaannya, Agus yang mana yang Anda maksud?

Ketika autocomplete dibatasi dengan syarat NIM misalnya, maka hanya Agus yang NIM nya Anda sebutkan yang akan muncul. Dalam kasus lain, misalnya dalam satu kode penjualan ada banyak kode barang dan kode barang yang sama ada di beberapa kode penjualan. Bagaimana Anda tahu kode barang yang muncul berasal dari kode penjualan yang Anda maksud?

Nah, saya akan membagikan Jquery autocomplete bersyarat kepada Anda. Contoh scriptnya sbb:

$("#nama").autocomplete('',{


url: "name_finder.php",
extraParams: { "nim": function(){

var nim = $("#nim").val();
return nim;


}
}

});

Rahasia script di atas adalah pada object JSON "extraParams". Object ini sendiri memerlukan input berupa object JSON, dalam contoh ini adalah "nim". Anda bisa menggantinya sesuai parameter conditional/syarat yang akan dikirimkan ke autocomplete. Object "nim" adalah suatu function yang mengembalikan nilai dari Input dengan id = "nim".

Hasilnya sbb:


Untuk mendownload contoh lengkap di sini

No comments:

Post a Comment