AutoComplete adalah sebuah fitur dimana kita memberikan saran kepada pengguna mengenai apa yang telah mereka ketikkan di textbox. Jadi user tidak perlu mengetik secara keseluruhan mengenai hal yang ingin dicari. Untuk mendapatkan fitur autocomplete kita dapat menggunakan
bantuan javascript terutama jquery. Fitur autocomplete itu sendiri sudah dimiliki oleh plugin jqueryui secara default, sehingga tidak perlu plugin tambahan lagi.
Adapun kasus yang cocok untuk menggunakan fitur autocomplete adalah pencarian nama kota. Misalkan kita memiliki database kota dan kita akan menggunakan database tersebut untuk mempermudah penggunna dalam mengisi field kota.
Adapun hal-hal yang harus di persiapkan adalah
1. Membuat Tabel Kota dan Konfigurasi Database CodeIgniter
Buatlah tabel dan isi nama kota seperti contoh berikut
CREATE TABLE IF NOT EXISTS `kota` (
`id_kota` int(11) NOT NULL AUTO_INCREMENT,
`nama_kota` varchar(50) NOT NULL,
PRIMARY KEY (`id_kota`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=17 ;
—
— Data for table `kota`
—
INSERT INTO `kota` (`id_kota`, `nama_kota`) VALUES
(1, ‘Aceh’),
(2, ‘Jakarta’),
(3, ‘Bandung’),
(4, ‘Cirebon’),
(5, ‘Dumai’),
(6, ‘Batam’),
(7, ‘Tanjung Pinang’),
(8, ‘Malang’),
(9, ‘Mataram’),
(10, ‘Maluku’),
(11, ‘Marauke’),
(12, ‘Surabaya’),
(13, ‘Semarang’),
(14, ‘Serang’),
(15, ‘Selatpanjang’),
(16, ‘Sumbawa’);
Tabel d iatas cukup sederhana, kita akan menyimpan id_kota dan namakota sebagai data utama pada tabel tersebut. Selain itu pastikan Anda telah mengkonfigurasi database Codeigniter. Konfigurasi tersebut berada di file application/config/database.php (perhatikan bab sebelumnya jika Anda bermasalah dalam mengkoneksikan database.
2. Membuat Model Tabel Kota
Setelah membuat table, hal berikutnya adalah membuat sebuah model yang digunakan untuk mengakses data dari tabel tersebut. Perhatikan model berikut ini:
1. <?php
2. class Kota_model extends CI_Model{
3.
4. function __construct(){
5. parent::__construct();
6. }
7.
8. function find($keyword){
9. $this->db->like(‘nama_kota’,$keyword,’after’);
10. $query=$this->db->get(‘kota’);
11. return $query->result_array();
12. }
13. }
14. /* End of file kota_model.php */
15. /* Location: ./application/model/kota_model.php */
Model tersebut hanya memiliki sebuah fungsi find yang digunakan untuk mencari nama kota yang termirip berdasarkan apa yang di ketikkan pengguna. Misalnya ketika pengguna mengetikan hurup “m” maka akan dicarikan semua kota yang berawalan dengan hurup “M” contoh malang.
3. Membuat Controller dan View Autocomplete
Autocomplete yang memanfaatkan ajax untuk mendapatkan data, harus menyiapkan sebuah fungsi yang bertujuan untuk memberikan data kepada script autocomplete dan sebuah fungsi untuk menampilkannya. Perhatikan controller Autocomplete berikut ini:
1. <?php if (! defined(‘BASEPATH’)) exit(‘No direct script access
allowed’);
2.
3. class Autocomplete extends CI_Controller {
4.
5. function __construct()
6. {
7. parent::__construct();
8. $this->load->database();
9. $this->load->model(‘kota_model’);
10. $this->load->helper(‘url’);
11. $this->load->helper(‘form’);
12. }
13.
14. function index()
15. {
16. $this->load->view(‘autocomplete/index’);
17. }
18.
19. function lookup()
20. {
21. $keyword=$this->input->post(‘term’);
22. $data[‘response’]=’false’;
23. $query=$this->kota_model->find($keyword);
24. if(! empty($query))
25. {
26. $data[‘response’]=’true’;
27. $data[‘message’]= array();
28. foreach($query as $row)
29. {
30. $data[‘message’][]= array(
31. ‘id’=>$row[‘id_kota’],
32. ‘value’=>$row[‘nama_kota’]
33. );
34. }
35. }
36. echo json_encode($data);
37. }
38. }
39. /* End of file autocomplete.php */
40./* Location: ./application/controllers/autocomplete.php */
Fungsi index pada baris ke-14 hanya berisi sebuah perintah untuk me-load sebuah view yaitu
view autocomplete/index. Adapun isi view tersebut adalah :
1. <!DOCTYPE HTML>
2. <htmllang=”en-US”>
3. <head>
4. <title>Codeigniter dan jQuery Autocomplete</title>
5. <link rel=”stylesheet” href=
6. “<?php echo base_url();?>public/jquery.ui.all.css”
7. type=”text/css” media=”all”/>
8. <link rel=”stylesheet” href=”<?php echo base_url();?>public/uilightness/jquery-ui-1.8.10.custom.css”
type=”text/css” media=”all”/>
9. <script src=”<?php echo base_url();?>public/js/jquery-
1.4.4.min.js” type=”text/javascript”></script>
10. <script src=”<?php echo base_url();?>public/js/jquery-ui-
1.8.10.custom.min.js” type=”text/javascript”></script>
11.
12. <script type=”text/javascript”>
13. $(this).ready( function(){
14. $(“#id_kota”).autocomplete({
15. minLength:1,
16. source:
17. function(req, add){
18. $.ajax({
19. url:”<?php echo base_url();?> ”
20. +”index.php/autocomplete/lookup”,
21. dataType:’json’,
22. type:’POST’,
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.
Jika kita memasukkan huruf maka akan keluar kata-kata yang direkomendasikan oleh script autocomplete. Hal tersebut terjadi karena kita telah memanggil fungsi autocomplete dengan menggunakan id inputan tertentu ($(“#id_kota”).autocomplete). id_kota merupakan id dari inputan yang telah kita buat.
Sumber : Buku Framework CodeIgniter
Andra Wisata's Blog 
gan itu kalau data tidak ada di tabel respon sistem nya bagaimana ya, request donk kalau tidak ada data respon nya data tidak ada
respon via email gan
respond nya no data aja. agan mau nya seperti apa?