Page 119 - Framework Codeigniter 2
P. 119
www.koder.web.id – Kumpulan tutorial komputer
23. data: req,
24. success:
25. function(data){
26. if(data.response =="true"){
27. add(data.message);
28. }
29. },
30. });
31. },
32. select:
33. function(event, ui){
34. $("#result").append(
35. "<li>"+ ui.item.value +"</li>"
36. );
37.
38. },
39. });
40. });
41. </script>
42.
43. </head>
44. <body>
45. <h1>Demo Auto load</h1>
46. Silakan Ketik Nama kota!! contoh: Malang<br/>
47. Nama Kota :
48. <?php
49. echo form_input('kota','','id="id_kota"');
50. ?>
51. <div id="result"></div>
52. </body>
53. </html>
View di atas berisi sebuah inputan yang memiliki nama kota. Baris ke-4 sampai dengan baris
ke-10 digunakan untuk me-load semua sumberdaya javascript yang dibutuhkan saat
menggunakan jquery autocomplete. Sedangkan baris ke-12 sampai dengan baris ke-41 adalah
script javascript yang berfungsi ketika menggunakan autocomple jquery.
Pada dasarnya sebuah script autocomplete akan memanggil sebuah callback. Callback
tersebut akan menghasilkan sebuah data dengan format JSON. Adapun contoh format data
yang dibutuhkan adalah
{
"response":"true",
"message":[
{"id":"8","value":"Malang"},
{"id":"9","value":"Mataram"},
{"id":"10","value":"Maluku"},
{"id":"11","value":"Marauke"}
]
}
Perhatikan baris ke-19 sampai dengan baris ke-20, kita memanggil fungsi lookup dari controller
autocomplete karena fungsi tersebut akan menghasilkan data json seperti di atas.
114
