Dedi Go Blog

Seperti kita ketahui, Jquery memiliki fitur autocomplete, umumnya source link untuk autocomplete data memiliki format : source_url.php?term=search_key
Bagaimana jika kita ingin menambahkan parameter ekstra ke dalam url tersebut? sehingga format urlnya jadi seperti ini : source_url.php?ekstra_parameter=parameter_tambahan&term=search_key
Sampai saat tulisan ini diposting, belum ada opsi ekstra parameter dalam jquery autocomplete
misalnya kita memiliki field autocomplete dengan id="autocomplete" dan field untuk parameter ekstra
Ekstra Parameter : <input type='text' id='extra' name='extra'/>
Autocomplete : <input type='text' id='autocomplete' name='autocomplete'/>
umumnya, kita akan pakai script seperti ini
<script>
$(function(){
$("#autocomplete").autocomplete({
source:"url_source.php" ,
minLength: 1,
select: function( event, ui )
{
//other action with json data from ui.item
}
});
})
</script>

Untuk script diatas hanya akan melengkapi field "autocomplete", sementara jika query pencarian kita membutuhkan syarat tambahan, namun syarat tambahan itu merupakan inputan juga dari field (nilai tidak statis) maka kita bisa menggunakan script seperti ini:

<script>
$(function()
{
$( "#autocomplete" ).bind('focus',function(){
var url="url_source?extra_parameter="+$("#extra").val();
$("#autocomplete").autocomplete({
source:url ,
minLength: 1,
select: function( event, ui )
{
//other action with json data from ui.item
}
});
})
});
</script>

Penjelasan script di atas: saat event focus ada pada field autocomplete, fungsi baru di ikatkan pada field autocomplete, fungsi itu terlebih dahulu mengcapture data dari field extra lalu mengeksekusi fungsi jquery autocomplete dengan alamat source yang telah dibubuhi parameter ekstra
Share